不使用css动画更改元素类

Question

我有一个类有以下类型的css animaton

.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动画的情况下添加类？

Answer 1

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

在运行时更改CSS规则并不困难，但显然很难找到所需的规则。 PPK在www.quirksmode.org上快速浏览了这个。

Answer 2

我认为你的意思是CSS Transitions。对于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();
});

    

Answer 3

$('#thediv').detach().addClass('cssanimation').appendTo('body');

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