2

我有一堂课有以下类型的 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 动画的情况下添加类？

4

3 回答 3

3

只需创建另一个没有动画的类并使用它。

在运行时改变 CSS 规则并不难，但显然很难找到你想要的规则。PPK 在www.quirksmode.org上对此进行了快速浏览。

于 2012-06-02T10:00:56.740 回答
1

我认为您的意思是 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();
});

​ ​</p>

于 2012-06-02T10:18:04.953 回答
0 
$('#thediv').detach().addClass('cssanimation').appendTo('body');

http://jsfiddle.net/R5mQC/3/

于 2012-06-02T10:10:32.780 回答