web-dev-qa-db-ja.com

CSSトランジションは上、下、左、右では機能しません

スタイルを持つ要素があります

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番目のケースでのみ動作しますか？

javascriptcsstransition
72
php_nub_qq

Cssにデフォルト値を設定してみてください（どこから始めたいかを知らせます）

CSS

position: relative;
transition: all 2s ease 0s;
top: 0; /* start out at position 0 */
158
xec

おそらく、CSSルールセットで最上位の値を指定する必要があります。そうすると、アニメーション化する値fromがわかるようになります。

15
sarahholden

私の場合、div位置が修正され、左位置を追加するだけでは十分ではなく、表示ブロックを追加した後にのみ機能し始めました

left:0; display:block;

0
Sameh