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

时间: 2018-05-17阅读: 3289标签: 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%; }

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;
};

该dom来源:不定高度动态元素height CSS3 transition过渡动画实例页面


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/777

关闭

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广