0

我正在尝试为页面上的某些元素设置动画。我需要动画的属性之一是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 函数？

4

1 回答 1

0

回答我自己的问题：

使用 timeOut 是正确的方法。

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

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

于 2013-01-08T12:43:20.417 回答