css3 は 2 つのアニメーションを同時に読み込みます_html/css_WEB-ITnose

私は最近 H5 に取り組んでおり、そのような要求に遭遇しました (タイトルのとおり)

コードの最初の部分:

.cur .p1d1d4{
width: 3rem;
margin: 2rem 5.3rem 0 0 ;
-webkit-anim ation : p1d1d4 1s easy-out;


@keyframes p1d1d4 {
margin: 2rem 10rem 0 0;
100% {
マージン: 2rem 5.3rem 0 0;
}
}

@-webkit-keyframes p1d1d4{
0% {
10rem 0 0;
100% {
マージン: 2rem 5.3rem 0 0;
}



通常の状況 基本的な考え方は次のとおりです:

webkitAnimationEnd アニメーションをリッスンして、別のクラスを追加します

1 document.querySelector('.p1d1d4').addEventListener("webkitAnimationEnd", function(e){

2 this.classList .add(' p1d1d4Scale')

3 })

このようにして、2 つのアニメーションが一緒に接続されます (効果を自分で作成します)。ただし、これの問題は、このソリューションが単一ページの形式である場合に発生します。 、前のページに戻った後、このページは常に p1d1d4Scale に保持されているアニメーション終了エフェクトであることがわかります。前のエフェクトを再度実行したい場合は、前のクラス エフェクトを削除して追加する必要がある場合があります

ただし。クラスでこの効果を実現するにはどうすればよいですか?
貼り付け

ここで、transition について考えてみました

このプロパティを簡単に紹介しましょう

このメソッドには 4 つのプロパティがあります

transition-property イージング プロパティを指定します

transition-duration 実行時間イージングの種類

transition-timing-function イージングの種類

transition -delivery 指定した時間後に実行する（遅延実行）

これだけは理解しておいてください

.cur .p1d1d4{

width: 3rem;

margin: 2rem 5.3rem 0 0;

-webkit-animation: p1d1d4 1 sease-out;

-webkit-transform: スケール(1.3); : スケール(1.3);

-o-transform : スケール(1.3);
トランジション: すべて 1 から 2 へ;
- moz-transition: すべて 1 イーズアウト 2
-o-transition: すべて 1 イーズアウト 2
}

アニメーションが終了してから 2 秒後に実行されます。共有はここで終わります

今日からは、よりカジュアルになる予定です ブログを書くときは、基本的なアイデア、計画、またはテクニックを共有する可能性があります。前回書いた反応デモは実際のものです。プロジェクトを直接開始できます。グローバル ES6 の記述方法 webpack のパッケージ化とホットロードの反応ルーターをまとめました。フォロー歓迎です。