jquery - cssアニメーションを使用せずに要素クラスを変更する

Question

次のタイプの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アニメーションを呼び出さずにクラスを追加できる方法がありますか？

Answer 1

アニメーションなしで別のクラスを作成して使用するだけです。

実行時にCSSルールを変更することは難しくありませんが、必要なルールを見つけることは明らかに困難です。PPKには、 www.quirksmode.orgでこれに関するクイックツアーがあります。

Answer 2

私はあなたが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>

Answer 3

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

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