есть ли способ достичь растущей анимации div с свойствами преобразования?

Question

я разработал анимацию, в которой ДИВ растет, используя следующие стили:

.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); 

Scale работает как умножитель, но я не уверен, что если вам нужна фиксированная высота пикселя

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