jquery - 悬停和正常状态之间的平滑过渡(使用 css3 动画)

Question

每次我将关键帧用于悬停动画时，动画会在鼠标离开时停止并大致返回到原始状态。有机会让运动更流畅吗？我尝试使用过渡，但它们似乎不适用于关键帧。

示例可以在下面找到(目前我正在使用 jQuery 添加悬停类，但 :hover 也不起作用): http://jsfiddle.net/42ZHq/

HTML

<div class="sign-container"></div>

CSS

.sign-container {
background:red;
width: 250px;
height: 238px;
margin:30px auto;
-webkit-transform: rotate(25deg);
-webkit-transform-origin: 22% 0;
}


.sign-container.hovered {
animation: wiggle 2s ease-in-out 0s 1 normal;
-webkit-animation: wiggle 2s ease-in-out 0s 1 normal;
-moz-animation: wiggle 2s ease-in-out 0s 1 normal;
-ms-animation: wiggle 2s ease-in-out 0s 1 normal;
-o-animation: wiggle 2s ease-in-out 0s 1css n ormal;
-webkit-transform-origin:22% 0;
}

@-webkit-keyframes wiggle {
0%   { -webkit-transform: rotate(25deg); }
25%  { -webkit-transform: rotate(10deg); }
50%  { -webkit-transform: rotate(25deg); }
75%  { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(25deg); }
}
@-moz-keyframes wiggle {
0%   { -webkit-transform: rotate(25deg); }
25%  { -webkit-transform: rotate(10deg); }
50%  { -webkit-transform: rotate(25deg); }
75%  { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(25deg); }
}

@keyframes wiggle {
0%   { -webkit-transform: rotate(25deg); }
25%  { -webkit-transform: rotate(10deg); }
50%  { -webkit-transform: rotate(25deg); }
75%  { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(25deg); }
}

JQUERY

    $(document).on('mouseenter', '.sign-container', function() {
    $(this).addClass('hovered');
}).on('mouseleave', '.sign-container', function() {
    $(this).removeClass('hovered');
});

谢谢， S.

附言。请不要因为缺少适当的前缀而讨厌，正在 Chrome 中进行测试...

Answer 1

我不知道这是否正是您正在寻找的答案，但这是我想出的解决方法。

您的问题之所以存在，是因为您在鼠标离开 div 时删除了该类。实际上，您不希望类在鼠标离开时被删除，您希望它在动画结束时被删除。因此，您可以设置一个计时器事件，在约 2 秒后删除该类，然后您可以一遍又一遍地重新播放动画。

JS:

$(document).on('mouseenter', '.sign-container', function() {
    if ($(this).hasClass('hovered')) {
        return false;   
    }
    $(this).addClass('hovered');
    var that = $(this);
    setTimeout(function (event) {
        that.removeClass('hovered');
    }, 2000);
});

演示:http://jsfiddle.net/42ZHq/3/