☰

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

tag-icon • tag-icon javascript css css-transitions
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'});
});

この原因は何でしょうか? 「遷移的」ではない特性はあるのでしょうか?

編集: これは jQuery ではなく、別のライブラリであることを言及すべきだったと思います。コードは意図したとおりに動作しているようで、スタイルが追加されていますが、トランジションは 2 番目のケースでのみ機能しますか?

ベストアンサー1

top遷移する前にどこから開始するかを知らせるために、CSS でのデフォルト値を設定してみてください。

CS

position: relative;
transition: top 2s ease 0s; /* only transition top property */
top: 0; /* start transitioning from position '0' instead of 'auto' */

これが必要な理由は、キーワードから遷移することができず、のデフォルト値topはauto。

また、次のようなこともお勧めします。移行したいものを正確に指定する（topの代わりにのみall）両方パフォーマンス上の理由そうすれば、意図せずに何か他のもの（ など）に移行することはありませんcolor。

おすすめ記事