スタイルを持つ要素があります
position: relative;
transition: all 2s ease 0s;
次に、クリックした後にその位置をスムーズに変更したいのですが、スタイルの変更を追加しても、トランジションは実行されず、代わりに要素が即座に移動します。
$$('.omre')[0].on('click',function(){
$$(this).style({top:'200px'});
});
ただし、たとえばcolor
プロパティを変更すると、スムーズに変更されます。
$$('.omre')[0].on('click',function(){
$$(this).style({color:'red'});
});
これの原因は何でしょうか? 「過渡的」ではないプロパティはありますか?
EDIT:これはjQueryではなく、別のライブラリであることに言及すべきだったと思います。コードは意図したとおりに動作しているように見え、スタイルが追加されていますが、トランジションは2番目のケースでのみ動作しますか?
Cssにデフォルト値を設定してみてください(どこから始めたいかを知らせます)
position: relative;
transition: all 2s ease 0s;
top: 0; /* start out at position 0 */
おそらく、CSSルールセットで最上位の値を指定する必要があります。そうすると、アニメーション化する値fromがわかるようになります。
私の場合、div位置が修正され、左位置を追加するだけでは十分ではなく、表示ブロックを追加した後にのみ機能し始めました
left:0; display:block;