Question

嘿，伙计们看看这个小提琴：

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

使用CSS-3，每次点击一个li时，都应该有一个小动画，I.E应该激活下面的动画：

@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的小提琴。

谢谢。

亚历山大。

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

正如您所看到的，此解决方案也可以正常工作，但为什么？

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

我不确切知道为什么（可能是浏览器的内部行为），但它可以在不使用计时器的情况下运行。

最好的问候。

为什么setTimeout激活我的动画？

1 个答案: