jquery - 尝试将 CSS3 动画应用于 span 中的文本

Question

我正在尝试将 CSS3 动画应用于 span 中的文本。

当元素具有动画类和动画名称的类时它起作用。

我正在使用 jQuery 添加这些类，因为此动画是在单击时发生的，并且将在 click() 函数内。 我还在添加它们之前删除了这些类，因为这些类只能存在一次以使动画起作用。

我以前做过很多次，但出于某种原因，当我在用 span 包裹的文本上尝试时它不起作用。

jQuery 似乎在开发人员工具中正常工作，我看到在单击时添加和删除类，但动画没有发生。

这是我的 jQuery 代码:

$(document).ready(function(){
    $('.I').click(function(){
            $(this).removeClass('animated').removeClass('wiggle').addClass('animated').addClass('wiggle');
    });
});

这是动画的 CSS:

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes wiggle {
0% { -webkit-transform: skewX(9deg); }
10% { -webkit-transform: skewX(-8deg); }
20% { -webkit-transform: skewX(7deg); }
30% { -webkit-transform: skewX(-6deg); }
40% { -webkit-transform: skewX(5deg); }
50% { -webkit-transform: skewX(-4deg); }
60% { -webkit-transform: skewX(3deg); }
70% { -webkit-transform: skewX(-2deg); }
80% { -webkit-transform: skewX(1deg); }
90% { -webkit-transform: skewX(0deg); }
100% { -webkit-transform: skewX(0deg); }
}

@-moz-keyframes wiggle {
    0% { -moz-transform: skewX(9deg); }
    10% { -moz-transform: skewX(-8deg); }
    20% { -moz-transform: skewX(7deg); }
    30% { -moz-transform: skewX(-6deg); }
    40% { -moz-transform: skewX(5deg); }
    50% { -moz-transform: skewX(-4deg); }
    60% { -moz-transform: skewX(3deg); }
    70% { -moz-transform: skewX(-2deg); }
    80% { -moz-transform: skewX(1deg); }
    90% { -moz-transform: skewX(0deg); }
100% { -moz-transform: skewX(0deg); }
}

@-o-keyframes wiggle {
    0% { -o-transform: skewX(9deg); }
    10% { -o-transform: skewX(-8deg); }
    20% { -o-transform: skewX(7deg); }
    30% { -o-transform: skewX(-6deg); }
    40% { -o-transform: skewX(5deg); }
    50% { -o-transform: skewX(-4deg); }
    60% { -o-transform: skewX(3deg); }
    70% { -o-transform: skewX(-2deg); }
    80% { -o-transform: skewX(1deg); }
    90% { -o-transform: skewX(0deg); }
100% { -o-transform: skewX(0deg); }
}

@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); 
100% { transform: skewX(0deg); }
}

.wiggle {
    -webkit-animation-name: wiggle;
    -moz-animation-name: wiggle;
    -o-animation-name: wiggle;
    animation-name: wiggle;

    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

更新:这是一个重现问题的 fiddle : http://jsfiddle.net/3Ld8e/1/

Answer 1

spans 是行内或流式元素，因此没有位置、高度、宽度；它们只是根据它们的位置流动。

尝试改变跨度以拥有

display: inline-block

这应该允许每个 span 都有自己的大小属性，然后可以对其进行动画处理。

您还需要let the browser redraw the page在删除 css 类并将它们添加回来之间。当前添加和删除类时不会发生这种情况:元素在浏览器之前和之后看起来是一样的。

最好的解决方案是监听 animationend 事件，然后删除类(在动画执行后)。

$(document).ready(function(){

    var letters = $('.I');

    letters.on('animationend oanimationend webkitAnimationEnd', function () {
        $(this).removeClass('animated wiggle');
    });

    letters.on('click', function(){
        $(this).addClass('animated wiggle');
    });
});

更新的 JSFiddle 在这里:http://jsfiddle.net/thefrontender/3Ld8e/3/