使用动画折叠 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 过渡和动画的性能应该几乎相同，因为它们都是硬件加速的，因此在大多数现代浏览器上，行为应该是相同的。

动画通常用于创建一系列更复杂的运动，它们不会将渲染过程提升到 GPU，因此比过渡慢。

This article 详细说明了何时使用动画与过渡。

Answer 2

对于这个用例，过渡似乎是更好的解决方案。使用动画，警报位置是一种 compute-intensive 方法。在这种情况下，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>

使用动画折叠 div：如何改进此代码？

Collapsing a div with Animation: how to improve this code?

css

animation