ウェブアプリケーションのアニメーションは非常に効果的な場合に行われます.アニメーションが滑らかで魅惑的であるならば、彼らはユーザーがあなたのウェブサイトで費やす時間を長くすることができます.しかし、アニメーションが不適切であるか、その運動においてまぎれているならば、ユーザーは欲求不満になって、非常に速く去ります.
それがWebアプリケーションフレームワークとアニメーションになるとき、開発者がVueについて好きである1つのもの.JSは、VIEJSはアニメーションの組み込みをサポートしているという事実であり、それは右のフィドルを回避する必要はありませんし、サードパーティのライブラリを研究.Vueをインストールするだけです.JSとあなたはオフです!
この記事では、vue 3の一般的なアニメーション機能を見ていきます.

ビデオチュートリアル-どのようにVue 3で友達リストUIを作成する

UIのプレビュー

どのようにVueを行う。JSは簡単にアニメーションを追加するには？

ボックスのうち、Vuejs遷移とアニメーションをサポートしています.トランジションは、2つの状態アニメーションに基づいています.そこでは、開始アニメーション状態と終了アニメーション状態があります.
あなたは、すべてのブラウザで気を取られたモーションアルゴリズムについて心配する必要はありません.
DOMから何かが追加されるか、または取り除かれるとき、通常、変化を述べます.Vue 3はコンポーネントを入力し、DOMを残しフックを提供します.これは、次の例に示すように、組み込みコンポーネントとコンポーネントラッパーを使用することによって実現されます.
上の例では
「DOMから追加されて、DOMから取り除かれます」というタグでタグを包んでいます.また、v - if ="show "を属性として持つことに注意してください.これは、このタグがレンダリングされるかどうかを決定するメカニズムであり、showの値をfalseに変更するとディスプレイから削除されます.
ラッパー遷移タグを詳しく見ると、ここで示すように、フェードに設定されているname属性も与えられます.フードの下では、遷移コンポーネントはアニメーションを可能にするいくつかの魔法を行ういくつかのフックを提供します.これらのフックは、CenterクラスのCenterクラスを追加します.これらは、遷移タグで指定されたname属性で前に付けられます.この例では、これらの動的に生成されたクラスを以下に示します.フェードインアクティブ.フェードはアクティブにします.からのフェード入力、...フェードリーブ.

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter-from, .fade-leave-to  {
  opacity: 0;
}

したがって、上記のCSSは我々の不透明度をアニメーション化するでしょう
DOMから追加または削除されるたびにタグを設定します.

さらに一歩踏み出して使いなさい

あなたがリストのような項目のグループをアニメーション化することによってこれをさらに取ることができます.以下の例を見てください.
テンプレートのキー部分はリストをレンダリングするコードのブロックです.

<transition-group name="list" tag="ul">
    <li v-for="item in items" :key="item" class="list-item">
      Item: {{ item }}
    </li>
  </transition-group>

私たちは使っています.私たちは普通を取り替えている
で.トランジションタグには、“UL”に設定されたタグ属性があります.これは、ULをレンダリングしていることを確認します.また、name属性を“list”と指定します.これを知ると、動的に生成されたクラスのアニメーションスタイルプロパティを次のように追加できます.

.list-enter-active,
.list-leave-active {
  transition: all 1s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

これはすべてのプロパティへの移行を適用しますが、我々は不透明度とy位置をアニメーション化するだけです.私たちは30 pxでyポジションで始めて、それを位置0に動かします、また、opacity 1で0という不透明度を適用します.

今より高度なアニメーションのために、我々はキーフレームを使用します。

我々は、キーフレームを使用して、我々の開始状態と終了状態の中間状態を適用して、高度なアニメーションを実現することができます.以下の例では、アイテムをバウンスするときの効果を追加します.
Vueが生成したアニメーション状態クラスのスタイルは次のようになります.
バウンスするには、逆の同じアニメーションを使用します.だから、キーワードが逆になっているのです.リストを残すアクティブクラス:

.list-leave-active {
  animation: bounce-in 0.5s reverse;
}

これらは、Vue 3でアニメーション化するために使用することができます簡単な機能は、ビデオを参照してくださいどのようにアニメーションの友人リストのUIを作成するには、これらのテクニックを使用してください.