css - 有没有什么办法可以通过变换属性实现不断增长的 div 动画？

Question

我使用以下样式开发了一个 div 在其中增长的动画:

.animation-start {
   overflow: hidden;
   height: 0;
}

.animation-end {
   height: 100px;
}

但这种方法的问题在于它在移动设备上呈现不流畅。目前，唯一在手机上流畅呈现的动画是使用 transform 属性的动画。有什么方法可以仅使用变换属性(不使用高度属性)来实现不断增长的 div 动画？

Answer 1

是的，您可以只向元素添加持续时间:

$(document).click(function(){
    $('div').toggleClass('animation-end');
});

div {
    background: #ffc;
    transition-duration: 300ms;
}
.animation-start {
    overflow: hidden;
    height: 0;
}
.animation-end {
    height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="animation-start">asdf</div>
click anywhere