Vue を使用してアニメーション効果を実現する方法を説明します (コード付き)

前回の記事「CSS3を使って簡単なページレイアウトを作成する方法をステップバイステップで教えます(詳細なコード説明)」では、CSS3を使って簡単なページレイアウトを作成する方法を紹介しました。ページレイアウト。以下の記事では、Vue を使ってアニメーション効果を実現する方法を紹介しますので、困っている方は参考にしていただければ幸いです。

#公式 API アドレス: https://cn.vuejs.org/v2/guide/transitions.html

デモクリックして表示/非表示

  
    Toggle
  
  
    
hello
  

トランジション使用

  (元素，属性、路由....)

ログイン後にコピー

クラスDefinition

.fade-enter{ }トランジションの開始状態を入力します。これは要素が挿入されたときに有効になり、フレームを 1 つだけ適用するとすぐに削除されます。 ; (モーションの初期状態)

.fade-enter-active{ }トランジションの終了状態を入力します。これは要素が挿入されたときに有効になり、t# の後に削除されます。 ##アニメーション/アニメーション##が完成しました。このクラスは、遷移プロセス時間、遅延、および曲線関数を定義するために使用できます。 .fade-leave{ }

.fade-leave-active{ }

transition/animation が完了すると削除されます。このクラスは、遷移プロセス時間、遅延、および曲線関数を定義するために使用できます。 カスタマイズされた遷移クラス名

.fade-enter
• は

  .fade-in-enter

  #デフォルトの
.fade-enter-active
• は

  .fade-in-active

  # #Default
.fade-leave
• は

  になります。 .fade-out-enter

  Default
.fade-leave-active
• は ## になります# .fade-out-active

  
    
  hello
  

  ログイン後にコピー

  .fade-in-active,
  .fade-out-active {
    transition: all 0.5s ease;
  }
  .fade-in-enter,
  .fade-out-active {
    opacity: 0;
  }

  ログイン後にコピー
  transition
関連関数

transition ##と組み合わせる#animate.css

次のコードは、X 軸をベースラインとして要素を反転および反転させるアニメーションを示しています。Animate.css ライブラリ ポイントは次のとおりです。アドレス: https://animate.style/

ログイン後にコピー

リスト遷移

ログイン後にコピー

グループ化する場合、キーの値がアニメーションに直接影響することに注意してください。トランジションの詳細については、vue アニメーション キー値がトランジション アニメーションのパフォーマンスに影響するを参照してください

推奨学習: JavaScript ビデオ チュートリアル

以上がVue を使用してアニメーション効果を実現する方法を説明します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。