Question

我正在尝试动画我页面上的一些元素。我需要设置动画的其中一个属性是bottom，但是，我还需要能够在没有动画的情况下重新定位元素，这就是为什么我为它添加了一个单独的类：.anim

.slideshow_footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff
}
.slideshow_footer.anim {
    -webkit-transition:bottom 0.3s ease-out;
    -moz-transition:bottom 0.3s ease-out;
    -o-transition:bottom 0.3s ease-out;
    -ms-transition:bottom 0.3s ease-out;
    transition:bottom 0.3s ease-out;
}

在我的Javascript中，我执行以下操作：

var footer = $('#footer');
// do some magic with the footer
// ...
// ...
setCss(footer, 'bottom', -100); // position it so it's hidden, this should be immediate
addClass(footer, 'anim'); // add the animation class
setCss(footer, 'bottom', ); // animate the footer sliding in

请注意，我没有使用jQuery或其他东西，它是一个内部javascript框架。

我找到了解决问题的解决方法，但它非常难看：

var footer = $('#footer');
// do some magic with the footer
// ...
// ...
setCss(footer, 'bottom', -100); // position it so it's hidden, this should be immediate
addClass(footer, 'anim'); // add the animation class
setTimeout(function() {
    setCss(footer, 'bottom', ); // animate the footer sliding in
}, 0); // even no timeout works...

任何人都可以向我解释发生了什么以及如何最好地解决这个问题？可能会改变addClass和setCss函数？

Answer 1

回答我自己的问题：

使用timeOut是正确的方法。

在整个JavaScript完成之前，浏览器不会更新可见的HTML。如果是这样，在“bottom”之后设置“right”会将元素移动两次。从浏览器的角度来看，该元素立即获得“anim”和底部0. setTimeout with 0 timeout告诉浏览器尽快执行代码，但不是在同一轮JavaScript中。

这种解决方法实际上被许多人采用作为运行代码的“异步”方式

过早地将类添加到过渡元素触发器

1 个答案: