Question

我试图做这样的事情：

element.classList.add('animate-in')
element.style.transform = 'translateY(100px)';

animate-in类具有动画的transition: transform 1s属性。但是，当我运行它时，元素被向下翻译100px但没有转换，似乎转换属性被修改，然后才能添加类名并生效。我不想使用setTimeout，因为它在动画中可能不可靠。有没有办法在修改任何样式之前等待添加类？

Answer 1

我认为我们没有为样式的应用提供任何活动。通过JavaScript，在这种情况下非常令人沮丧......

我发现this thread非常有用。

有一点需要注意：即使您使用0毫秒的setTimeout，动画仍然有效。特别是它与动画相混淆的原因是什么？

setTimeout(function(){
    element.style.transform = 'translateY(100px)'
}, 0)

此外，如果您使用事件进行设置，则可以直接更改样式并查看应用的动画。

这是我正在玩的垃圾箱：https://jsbin.com/lofotutumu/edit?html,css,js,output

Answer 2

您并不想等待，但希望应用嵌入此新类的属性。

这可以通过触发回流来同步完成。

有些properties/functions需要重新计算DOM框才能返回其值。为此，浏览器必须在页面上触发重排，因此将应用您的新属性。

但请注意，这会对性能产生影响，尤其是在复杂页面上，因此请谨慎使用。

＆＃13;

element.classList.add('animate-in');
element.offsetTop; // trigger a reflow
element.style.transform = 'translateY(100px)';

＆＃13;

.animate-in {
  transition: transform 2s linear;
}

＆＃13;

<div id="element">Hello</div>

＆＃13;

Answer 3

创建关键帧并将其添加到您的课程中是否符合您的需求？ E.g。

// This is your keyframe to animate your element
@keyframes translateDown {
    0%{
        transform:translateY(0);
    }
    100%{
        transform:translateY(100px);
    }
}

.animate-in{
    animation: 2s linear translateDown both;
}

在修改样式之前等待添加类

3 个答案: