使用Animation折叠div:如何改进此代码

Question

我正在尝试制作一个在触摸时出现和消失的div，就像android手机的导航栏一样。我应该使用转换还是动画可以？在fiddle的例子中，我使用鼠标点击和setTimeout来模拟触摸，如果你在几秒钟内不触摸屏幕，就会自动消失。

.custom-row{
position: fixed;
width: 100%;
height: 50px;
bottom: -100px;
left: 0px;
background-color: yellow;
opacity: 0;
}
.slidein {
animation: slidein 1s ease-in forwards;
}
.slideout {
animation: slideout 1s ease-in forwards;
}
@keyframes slidein {
0% {
}
100% {
bottom: 0px;
opacity: 1;
}
}

@keyframes slideout {
0% {
bottom: 0px;
opacity: 1;
}
100% {
bottom: -100px;
opacity: 0;
}
}

https://jsfiddle.net/1rm64q8z/1/

Answer 1

对于这个用例，转换似乎是一个更好的解决方案。对于动画，报警位置是一种计算密集型方法。在这种情况下，CSS的可读性和可扩展性也会大大提高。

const bar = document.getElementById("bottom-bar");
bar.addEventListener("click", (el) => {
el.target.classList.toggle("slide-out");
setTimeout(() => {
el.target.classList.toggle("slide-out");
el.target.classList.toggle("slide-in");
}, 2000)
})

body {
overflow: hidden;
}
#bottom-bar {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background: yellow;
padding: 16px;
text-align: center;
transform-origin: bottom;
transition: transform 0.4s ease-in-out;
}
.slide-in {
transform: translateY(0%);
}
.slide-out {
transform: translateY(100%);
}

<div id="bottom-bar">
Hello
</div>

Answer 2

CSS转换和动画的性能应该几乎相同，因为它们都是硬件加速的，所以在大多数现代浏览器上，行为应该相同。

动画通常用于创建一系列更复杂的移动，并且它们不会将渲染过程提升到GPU，从而导致比过渡慢。

这篇文章给出了一个关于何时使用动画与过渡的详细分类。