javascript - 为什么 setTimeout 激活我的动画？

Question

嘿伙计们看看这个 fiddle :

Fiddle .

现在我在这个 fiddle 中做的是当我点击任何 li 元素时，我有一个数据属性附加到每个 li 元素，Jquery 代码基本上获取特定的 li 元素数据值并将其显示在 div 中，现在我真的很想将 CSS-3 和 Jquery 结合在一起。

使用 CSS-3，每次我点击一个 li，它应该有一个小动画，即下面的动画应该被激活:

@keyframes rotate {
    0% {
        transform:rotateX(50deg) translateY(-20px);
        /*transform: translateX(100px);*/
    }
    100% {
        transform:rotateX(0deg) translateX(0px);
    }
}
.animated {
    -webkit-animation-name: rotate;
    -o-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

I.E 动画应该在 li 数据显示之前被激活。

现在我的 Jquery 代码如下:

$(document).ready(function () {
                $('ul').on('click', 'li', function () {
                    $this = $(this);
                    var _stor = $this.data('says');
                    $('.testimo').removeClass('animated').html(_stor).addClass('animated');
                });
            });

现在，我通过询问我的一位高级同事解决了我的问题，他只是说使用 setTimeOut 函数，所以我将我的 Jquery 代码更改为如下内容:

$(document).ready(function () {
    $('ul').on('click', 'li', function () {
        $this = $(this);
        var _stor = $this.data('says');
        $('.testimo').removeClass('animated');
        setTimeout(function(){
            $('.testimo') .html(_stor).addClass('animated');
        },100)
    });
});

Thsi 以我想要的方式完美运行。但我的问题是为什么这段代码有效？无论如何，setTimeout 与动画有什么关系？我的问题是为什么带有 setTimeout 的代码有效？

这是 setTimeout 的 fiddle .

谢谢。

亚历山大。

Answer 1

还有另一种方法可以得到你想要的:http://jsfiddle.net/5vb9jhq9/4/

$(document).ready(function () {
    $('ul').on('click', 'li', function () {
        $this = $(this);
        var _stor = $this.data('says');
        $('.testimo').removeClass('animated').
            html(_stor).width($('.testimo').width).
            addClass('animated');
    });
});

如您所见，此解决方案也能正常工作，但为什么呢？

浏览器看起来不需要更新屏幕或文档，直到它在执行整个功能后真正需要这样做。因此，您可以在浏览器中触发更新，例如，更改大小(宽度、高度等)。

我不知道为什么(可能是浏览器的内部行为)但它在不使用计时器的情况下工作。

最好的问候。