CSS3-过渡的局限性以及解决方法

CSS3有很多很棒的特性，在一个小项目中，为了实现流畅的视觉效果，采用了CSS3的过渡属性——transition，为了解决它的局限性带来的问题，我采取了一个很不优雅的解决方法，如果有更好的解决方法欢迎评论。

关于transition

用法方面的问题大家可以参考W3school教程这部分的内容
传送门
简单描述一下：transition:属性名时间[,属性名时间];
当transition中描述的属性变化的时候，就会触发过渡，过渡的时间我们可以定义，支持单位s或者ms。
通常我们在改变元素的大小，透明度，颜色的时候使用它，这样使得变化看起来更流畅。于是，问题来了～
##　局限性
transition 的局限性在于，如果想进行过渡，我们只能从一个具体值转化到另一个具体值，而不能进行具体值和auto的转化，大家可以试一下下面这个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .test{
            width:100px;
            transition:width 5s, height 5s;
            background: red;
        }
        .test:hover{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="test">
        这里有个div
    </div>
</body>
</html>

当我们hover到这个div上的时候，我们可以很明显的观察到，宽度的变化是过渡的，而高度的变化是瞬时的。这种情况往往发生在容器的大小不确定，要适应内容的多少的情况下。

解决办法

既然不能进行auto和具体值之间的转化，我们就在转化之前为这个元素的属性进行赋值。以上面的例子为例，我们可以在这个div渲染出来后，通过js获取到它的高度，然后显性的设置它的style，之后过渡就可以生效了～
在上面的html代码中加入下面这一段

<script>
    window.onload = function(){
        let testDiv = document.getElementsByClassName("test")[0];
        console.log(testDiv.offsetHeight);
        testDiv.style.height = testDiv.offsetHeight + 'px';
    };
</script>

同时由于行内样式有最高的优先级，所以要把上面的.test:hover中的属性加上!important:

.test:hover{
    width: 200px;
    height: 200px!important;
}

就是这样子～