不定高度的元素实现transition动画_如何为height:auto的div添加css3过渡动画

一个元素不设置高度时,height的默认值是 auto,浏览器会自动计算出实际的高度。那么如何为一个height:auto的元素添加 css3动画呢?在MDN文档中css 支持动画的属性中的 height 属性如下 :当 height 的值是 length,百分比或 calc() 时支持 css3 过渡,所以当元素 height : auto 时,默认是不支持 css3 动画的。

 

为了解决这个问题,我们可以通过js 获取精确的 height 值,或者使用max-height 代替 height。只需要设置一个肯定比元素自增长大的高度值,由于是根据 max-height 值进行过渡效果,所以最好不要大得离谱,否则动画效果不理想。下面就介绍这2种方式的实现:

 

1、利用max-height:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            *{
                margin: 0;
                padding:0;
            }
            div{
                
                display: inline-block;
                overflow: hidden;
                background-color: orange;
                max-height: 20px;
                -webkit-transition: max-height 1s;
                transition: max-height 1s;
            }
            div:hover{
                max-height:200px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>我不是height,是max-height</p>
            <p>我不是height,是max-height</p>
            <p>我不是height,是max-height</p>
            <p>我不是height,是max-height</p>
            <p>我不是height,是max-height</p>
            <p>我不是height,是max-height</p>
        </div>
    </body>
</html>

  

 

2、通过js获取高度

css:

.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; overflow: hidden; }
.loading { height: 100%; background: url(loading.gif) no-repeat center; }
.in { width: 100px; margin: 0 auto;  border: 50px solid #beceeb; background-color: #f0f3f9; }
[type=button] { width: 100px; height: 32px; font-size: 100%; }

资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh

html:

<div id="box">...</div>
<p>
    <input type="button" id="button" value="点击我">
</p>

  

js:

// 高度无缝动画方法
var funTransitionHeight = function(element, time) { // time, 数值,可缺省
    if (typeof window.getComputedStyle == "undefined") return;
    
    var height = window.getComputedStyle(element).height;

    element.style.transition = "none";    // 本行2015-05-20新增,mac Safari下,貌似auto也会触发transition, 故要none下~
   
    element.style.height = "auto";
    var targetHeight = window.getComputedStyle(element).height;
    element.style.height = height;
    element.offsetWidth = element.offsetWidth;
    if (time) element.style.transition = "height "+ time +"ms";
    element.style.height = targetHeight;
};

  

 

不定高度的元素实现transition动画_如何为height:auto的div添加css3过渡动画

上一篇:VBS基础篇 - 对象(1) - Class对象


下一篇:线段树|计蒜客:最甜的苹果-区间最大值