用另一个替换一个css3动画答案

【问题标题】：Replacing one css3 animation with another用另一个替换一个css3动画
【发布时间】：2013-08-23 01:11:25
【问题描述】：

我希望能够为我网站上的某个图像设置动画效果（背景位置的缓慢过渡）。但是在某个用户交互之后，我希望能够删除该动画并切换到不同的动画。我该如何做到这一点？

【问题讨论】：

【解决方案1】：

你可以给它添加一个类：

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

这样，您不必删除课程。使用 jQuery，只需使用这个：

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

【讨论】：

不需要 !important - 第二个选择器比第一个选择器更具特异性。
@dc5 确实，任何支持 CSS3 动画的浏览器都会支持正确的顺序。我从我的回答中删除了!important。

【解决方案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');
}

【讨论】：

【解决方案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;
}

See this working demo

【讨论】：