不定高元素的高度transition動畫實現

beanlam 發布于2019-04-23 13:43 / 2470人閱讀

摘要：分析文檔描述分析文檔描述支持動畫的屬性中的屬性如下即當的值是，百分比或時支持過渡。不定高度動態元素過渡動畫實例頁面

分析文檔描述

CSS 支持動畫的屬性中的 height 屬性如下：

height ：yes, as a length, percentage or calc()

即：當 height 的值是 length，百分比或 calc() 時支持 CSS3 過渡。

所以當元素 height : auto 時，是不支持 CSS3 動畫的。

解決辦法

一、使用max-height屬性代替height實現過渡效果

div{
  max-height: 0;
  transition: max-height .5s;
}
div:hover{
  max-height: 200px;
}

二、使用js獲取精確的 height 值

這里不做詳細說明，可以看一下大神的demo。

不定高度動態元素height CSS3 transition過渡動畫實例頁面

云服務器 GPU云服務器 html p元素高度元素動畫實現加載動畫 javascript實現動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2254.html

《CSS世界》閱讀筆記（二）——塊級元素與基本尺寸

摘要：塊級元素基本概念塊級元素是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。其中內部尺寸由內部元素決定還有一類叫作外部尺寸寬度由外部元素決定。所以子元素的高度設為是無效的。此時的就會有計算值，即使祖先元素的計算為也是如此。塊級元素基本概念塊級元素：是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。塊級元素和display 為 block 的元素不是一個概念。每...

lylwyy2016 2019-08-29 18:31 評論0 收藏0
CSS3學習筆記

摘要：只對英文起作用，以單詞作為換行依據。換句話說，字符串與屬性值中的任意位置相匹配。其主要有兩個值和。主要具有四個屬性值和。或表示紅色，表示綠色，表示藍色，也可取其他數值來指定顏色。 1.文檔換行 a.強制一排顯示文本，多出的地方切割文本，并加上省略號，三句真言 text-overflow:ellipsis; /*實現溢出時產生省略號的效果, 或者clip表示剪切*/ overflow:h...

Flink_China 2019-08-29 12:36 評論0 收藏0
第一課關于側邊欄下拉手風琴的實現

摘要：一主要知識點布局，變換，事件觸發二屬性記憶規則子元素會繼承父元素的布局屬性。盒子的實際寬度設置的和不會影響實際寬度定位屬性，用于上的角形的實現，此次小角形實現需要用到父相對位置，子絕對位置。一、主要知識點：html布局，css變換，js事件觸發二.CSS屬性記憶： CSS規則：子元素會繼承父元素的布局屬性。不專門改變子元素的屬性，其會跟隨父元素。功能語句 marg...

番茄西紅柿 2019-04-23 11:52 評論0 收藏0