用影片折疊div：如何改進這段代碼？-有解無憂

我正在嘗試制作一個在觸摸時出現和消失的 div，例如 android 手機的導航欄。我應該為此使用過渡還是影片可以？在小提琴示例中，我使用滑鼠單擊和 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/

uj5u.com熱心網友回復：

對于這個用例，過渡似乎是一個更好的解決方案。對于影片，警報位置是一種計算密集型方法。在這種情況下，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>

uj5u.com熱心網友回復：

CSS 過渡和影片的性能應該幾乎相同，因為它們都是硬體加速的，因此在大多數現代瀏覽器上的行為應該是相同的。

影片通常用于創建更復雜的一系列運動，它們不會將渲染程序提升到 GPU，從而導致比過渡更慢。

本文詳細介紹了何時使用影片與過渡。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/436217.html

標籤：css 动画

上一篇：vh單位似乎不適用于transform:translateY

下一篇：CSS轉換在類之間切換后不起作用