1

我正在尝试将 CSS3 动画应用于包含在跨度中的文本。

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

我正在使用 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;
}

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

4

2 回答 2

1

跨度是内联或流元素，因此没有位置、高度、宽度；他们只是根据他们的位置流动。

尝试将跨度更改为

display: inline-block

这应该允许每个跨度都有自己的大小属性，然后可以设置动画。

您还需要让浏览器在删除 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/

于 2013-04-14T00:10:34.727 回答
0

您缺少动画 CSS 开头的类选择器。现在它是将动画应用于动画类的元素 bazinga。

于 2013-04-15T03:51:08.200 回答