我希望能够为我网站上的某个图像设置动画效果(背景位置的缓慢过渡)。但是在某个用户交互之后,我希望能够删除该动画并切换到不同的动画。我该如何做到这一点?
问问题
40 次
3 回答
0
您添加和删除具有动画属性的类
.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');
}
于 2013-08-22T14:29:20.393 回答
0
你可以给它添加一个类:
.element{
animation: first 1s forwards;
}
.element.clicked{
animation: second 1s forwards;
}
这样,您就不必删除一个类。使用 jQuery,只需使用这个:
$('.element').click(function(){$(this).addClass('clicked');});
于 2013-08-22T14:31:32.627 回答
0
使用: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;
}
于 2013-08-22T14:58:27.983 回答