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

Answer 2

转换和转换属性应该能够为您处理

transition: all 0.5s ease;
transform: scale(2);

// Or individually target the axis you want to scale
transform: scaleX(2);
transform: scaleY(2);

比例作为乘数，但我不确定你是否需要固定的像素高度

有没有办法用变换属性实现增长的div动画？

2 个答案: