在不使用css动画的情况下更改元素类
在不使用css动画的情况下更改元素类
提问于 2012-06-02 17:51:23
我有一个包含以下css动画类型的类
.cssanimation {
-webkit-transition: 0.2s all ease-in-out
-o-transition: 0.2s all ease-in-out
-moz-transition: 0.2s all ease-in-out
transition: 0.2s all ease-in-out
.. some other changes in position
}我有div
<div id="thediv"> ... </div>
$('#thediv').addClass('cssanimation') //animates the object我有时确实会使用此动画，但有时我想添加它而不调用动画
Jquery有没有办法在不调用css动画的情况下添加类？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-06-02 18:00:57
您只需创建另一个不带动画的类并使用它。
在运行时更改CSS规则并不困难，但显然很难找到您想要的规则。PPK在www.quirksmode.org上对此进行了快速浏览。
Stack Overflow用户
发布于 2012-06-02 18:18:05
我想你指的是CSS过渡。对于http://www.w3.org/TR/css3-animations/animations，您可以定义关键帧来微调过渡，但我不认为您需要它。
我认为，下面的代码可以满足您的需求。http://jsfiddle.net/Y69VB/1/
HTML
<button id='anim'>animate</button>
<button id='move'>move</button>
<div id='moveme' class='pos1'>Here</div>CSS
.cssanimation {
transition: top 2s;
-moz-transition: top 2s; /* Firefox 4 */
-webkit-transition: top 2s; /* Safari and Chrome */
-o-transition: top 2s; /* Opera */
}
#moveme {
position: absolute;
width: 50px;
height: 50px;
border: 1px solid red;
}
.pos1 {
top: 30px;
}
.pos2 {
top: 80px;
}JavaScript
var $moveme = $('#moveme');
function togglePosition() {
$moveme.toggleClass('pos1');
$moveme.toggleClass('pos2');
}
$('#anim').click(function(){
$moveme.addClass("cssanimation");
togglePosition();
});
$('#move').click(function(){
$moveme.removeClass("cssanimation");
togglePosition();
});
Stack Overflow用户
发布于 2012-06-02 18:10:33
$('#thediv').detach().addClass('cssanimation').appendTo('body');http://jsfiddle.net/R5mQC/3/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10861344
复制相关文章
相似问题
腾讯云开发者
