将一个css3动画替换为另一个

Question

我希望能够为我的网站上的某个图像设置动画效果(背景位置的缓慢过渡)。但是经过一定的用户交互后，我希望能够删除该动画并切换到另一个动画。我怎样才能做到这一点？

Answer 1

您可以在其中添加一个类：

.element{
    animation: first 1s forwards;
}
.element.clicked{
    animation: second 1s forwards;
}

这样，您就不必删除类。对于jQuery，只需使用以下内容：

$('.element').click(function(){$(this).addClass('clicked');});

Answer 2

添加和删除具有动画属性的类。

.classOne {
    animation: one 5s forwards;
}
.classTwo {
    animation: two 3s forwards;
}

以及这样做的javascript

var obj = document.getElementById('animatedElement');
obj.onclick = function() {
    obj.classList.remove('classOne');
    obj.classList.add('classTwo');
}

等效jQuery

$('#animatedElement').on("click", function() {
    $(this).removeClass('classOne').addClass('classTwo');
}

Answer 3

使用:not选择器并切换元素类，您可以这样做来更改当前的元素动画：

#xpto:not(.anim) {
    -webkit-transition:background-position 1s ease;
    -moz-transition:background-position 1s ease;
    -o-transition:background-position 1s ease;
}

#xpto.anim {
    -webkit-transition:opacity 1s ease-in-out;
    -moz-transition:opacity 1s ease-in-out;
    -o-transition:opacity 1s ease-in-out;
}

#xpto:not(.anim):hover {
    background-position: 0 0;
}

#xpto.anim:hover {
    opacity: 0.2;
}

请参阅此工作演示