是否有任何方式來實現變換屬性越來越多的div動畫？

Question

我已經開發其中一個div增長通過以下方式動畫：

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

.animation-end { 
    height: 100px; 
} 

但是這種方法的問題在於，它不是在移動設備上順利呈現。目前，只有使用transform屬性的手機才能順利播放動畫。有沒有什麼辦法通過單獨的變換屬性來實現增長的div動畫（不使用height屬性）？

Answer 1

的過渡和轉換屬性能夠幫助您處理該

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

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

大型工程爲乘數，但我不知道，如果你需要一個固定的像素高度

Answer 2

是的，你可以只需添加一個持續時間元素：

$(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