在某些界面中,我想要做动画效果。由于transform属性比其他CSS属性更优化,所以我会使用它。
使用transform: scale():当元素的宽高比不变时,没有问题。当比例应该改变时,我发现的解决方案是放置一个容器,在这个容器中有一个内部块。然后对内部块应用相反的变换,使得比例在动画期间和之后看起来保持不变。
我做了一个测试,它有效,但在动画期间存在一个问题:内部块在动画期间看起来被拉伸了。我不明白为什么,因为动画时间相同,缓动方式是线性的。
使用transform: scale():当元素的宽高比不变时,没有问题。当比例应该改变时,我发现的解决方案是放置一个容器,在这个容器中有一个内部块。然后对内部块应用相反的变换,使得比例在动画期间和之后看起来保持不变。
我做了一个测试,它有效,但在动画期间存在一个问题:内部块在动画期间看起来被拉伸了。我不明白为什么,因为动画时间相同,缓动方式是线性的。
https://codepen.io/AdamElio/pen/PabejP
(单击菜单以切换动画)
document.querySelector('#menu').addEventListener('click', function() {
this.classList.toggle('collapsedd')
});
#menu {
margin: 30px;
padding: 15px;
background: white;
width: 150px;
overflow: hidden;
transform-origin: top center;
transition: transform .5s linear;
}
#menu.collapsedd {
transform: scaleY(.2);
}
#menu .inner {
transition: transform .5s linear;
transform-origin: top center;
}
#menu.collapsedd .inner {
transform: scaleY(5);
}
#menu .inner ul {
padding: 0;
margin: 0;
list-style: none;
}
<nav id="menu">
<div class="inner">
<h5>Menu</h5>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</nav>
<div id="transform"></div>