时间戳

首页 > 解决方案 > 如何在 Javascript 上链接两个 CSS 转换？

javascript - 如何在 Javascript 上链接两个 CSS 转换？

问题描述

我正在尝试制作一个动画，在其中翻译没有过渡的幻灯片。然后翻译相同的幻灯片，但有一个过渡。

我一直在尝试不同的方法，这是我找到的唯一解决方案，因此首先执行第一个转换和转换，然后执行第二个转换和转换。有多糟糕？

slideshow.style.transition = `none`;
slideshow.style.transform = `translateX(-1000px)`;

setTimeout(() => {
    slideshow.style.transition = `.5s ease-out all`;
    slideshow.style.transform = `translateX(0)`;
},10);

我知道有 CSS 回调，但是当我尝试它们时，并没有按预期工作。

标签： javascriptcssanimationcallbacktransition

解决方案

如果你想在 JS 中完成这一切，你可以用 requestAnimationFrame 代替 setTimeout。

这使幻灯片翻译了-1000px，但在下一个可能的机会它开始将其翻译回0，无需等待（相当随机的）10ms。

const slideshow = document.querySelector('.slideshow');
slideshow.style.transition = `none`;
slideshow.style.transform = `translateX(-1000px)`;

requestAnimationFrame(() => {
    slideshow.style.transition = `.5s ease-out all`;
    slideshow.style.transform = `translateX(0)`;
});
<div class="slideshow" style="width: 100px; height: 100px; background-color: blue;"></div>

或者，您可以考虑使用持续时间为 0.5 秒的 CSS 动画而不是过渡，因为这将首先翻译元素，然后开始将其移动到最终位置，而无需回调。

@keyframes move {
  0% {
    transform: translateX(-1000px);
  }
  100% {
    transform: translateX(0px);
  }
}

推荐阅读