如何在 Javascript 上链接两个 CSS 转换？答案

【问题标题】：How to chain two CSS transitions on Javascript?如何在 Javascript 上链接两个 CSS 转换？
【发布时间】：2021-05-26 07:15:20
【问题描述】：

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

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

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

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

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

【问题讨论】：

回调是如何工作的？来晚了？早期的？从不跑？错误？
另外，如果您设置了正确的延迟量（在这种情况下为 500），您可以使用该 setTimeout。
对不起，我发布的代码有误。我编辑了，你可以看到转换设置为无，所以第一个转换没有转换。因此，当我运行回调时，问题是回调从未运行，我认为因为没有过渡，所以它不算翻译。
好吧，如果没有过渡......它只会......发生......不需要延迟或回调

标签： javascript css animation callback transition

【解决方案1】：

这样做并没有错。但是..如果你在 Css 中链接你的过渡，浏览器不需要做任何额外的计算，你的动画会比黄油更平滑.. 即：

对于具有 'position: relative' 属性的元素，top、right、bottom、left 不会影响文档布局，并且可以与 transform 属性一起使用以实现超平滑的过渡和动画..

transform: translateY(1000px) 顶部： - 1000px transition: top 0s linear 2s(在元素跳跃1000px之前需要2s), transform 1s ease 2s(元素会在2s延迟后滑动1s，这将使它看起来像在循环顶部属性的瞬间跳跃..)`

希望对你有所帮助:)

【讨论】：

【解决方案2】：

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

这将幻灯片转换为 -1000 像素，但在下一个可能的机会它开始将其转换回 0，无需等待（相当随机的）10 毫秒。

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)`;
});

&lt;div class="slideshow" style="width: 100px; height: 100px; background-color: blue;"&gt;&lt;/div&gt;

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

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

【讨论】：