左の余白を操作して要素のスライドを作りたいと思います。余白左のトランジションはアニメーション化されていません
jQuery animate()
を使用していますが、CSSトランジションを使用してパフォーマンスを改善したいと考えています。
私はスライドしたい要素に新しいクラスを追加するためにjQueryを使用していますが、アニメーション化されません。要素を瞬時に移動します。
ここには、問題を示すJS Fiddleがあります。
'animate left'というラベルの付いたボタンをクリックすると、jQuery animate()
が使用され、期待どおりに機能します。
'transition left'というラベルのボタンをクリックすると、 'slide'クラスが追加されますが、期待どおりに機能しません。
私は、余白をautoからfixed percentageに変更しようとしましたが、それはまったく助けませんでした。
興味深いことに、F12を押して 'slide'クラスのmargin-leftプロパティを-100%から-50%に手動で変更すると、アニメーション化されます。
これはなぜ機能しないのでしょうか?
は疑問が翻訳を使用していない、でした。 –
興味深いことに、これは翻訳では機能するようですが、余白が残っていません。私はこの答えは同じことを達成するための素晴らしい代替方法だと思います。残念ながら、マージンをアニメートすることはなぜ機能しないのか説明していません。そこに任意のアイデア? – RMo
私は自動でマージンを残すことができたので、私はdejakobの答えを受け入れましたが、答えのどれも、私が必要とする動的に追加されたdivを取り除かずに移行作業を行いませんでした。動的に追加されたdivは、移行がうまくいかない理由と思われます。 – Damian