私は CSS と Web テクノロジ全般に非常に慣れていないため、タブ付きのナビゲーション バー インジケーターを実装する予定です。現在、アニメーションのトランジションを使用して正しく動作しています。例えば:
What I have:
From tab 2 to tab 3
Start of animation
| T1 | T2 | T3 |
----
Middle of animation
| T1 | T2 | T3 |
----
End of animation
| T1 | T2 | T3 |
----
What I want:
From tab 2 to tab 3
Start of animation
| T1 | T2 | T3 |
----
Middle of animation
| T1 | T2 | T3 |
--------- (Grow from prev tab to next tab)
End of animation
| T1 | T2 | T3 |
---- (Shrink to selected tab)
すべてスムーズにアニメーション化。選択したタブに応じて変化するマージンに遷移を追加することで、CSS を使用して実装しました。必要なものを実装するために別の遅延トランジションを追加しようとしましたが、トランジション用のクラスを追加すると (Enyo を使用しています)、両方が同時に適用されているように見え、どちらも期待どおりに動作しません。すぐに開始するトランジションを持つクラスと、最初のアニメーションが終了したときに開始する遅延を持つクラスの両方を追加していますが、これを行うことは CSS ではサポートされていないと思います。
これを実装する良い方法は何でしょうか? できれば再利用可能なもの。ありがとう。
編集:いくつかのコード:
adjustSlider: function(){
if(this.vote == 1){
this.$.slider.addClass('slider-up-start slider-up-end');
this.$.slider.removeClass('slider-down-start slider-down-end');
}
if(this.vote == -1){
this.$.slider.addClass('slider-down-start slider-down-end');
this.$.slider.removeClass('slider-up-start slider-up-end');
}
},
.slider-up-start{
background-color: #27AE60;
width: 100%;
margin-left: 0%;
height: .3em;
-webkit-transition: margin-left .3s, width .3s, background-color .3s;
transition: margin-left .3s, width .3s, background-color .3s;
}
.slider-up-end{
width: 50%;
transition: width .3s;
transition-delay: .3s;
}
.slider-down-start{
background-color: #C0392B;
width: 100%;
margin-left: 0%;
height: .3em;
-webkit-transition: margin-left .3s, background-color .3s;
transition: margin-left .3s, background-color .3s;
}
.slider-down-end{
width: 50%;
margin-left: 50%;
transition: width .3s, margin-left .3s;
transition-delay: .3s;
}
私は現在、webkit ではなく、移行をテストしています。両方のクラス (遅延のあるもの) を適用しても、期待どおりに機能するとは思いません。