Vue プロジェクトでアニメーション遷移アニメーションを使用して、シンプルで派手なページ切り替え効果を追加します。
最初のステップは CSS スタイルを導入することです
vue プロジェクトのパブリック フォルダーにindex.html へのリンクを導入し、それをコピーするだけです。
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
以下に示すように:
ここに10行目を入れます
2 番目のステップは、コンポーネント内でtransitionタグを使用してrouterviewをラップすることです。
アニメーション効果を実現するには、ルータービューに実装する必要があります。それをコピーするだけです。
<transition
enter-active-class="animated bounce"
leave-active-class="animated bounce"
>
<router-view></router-view>
</transition>
以下に示すように:
ここでは 2 つのプロパティが必要です。
enter-active-class 进入时的动画类名；leave-active-class 离开时的动画类名
カスタムの過剰なクラス名は vue 公式 Web サイトで見つけることができます。それをコピーするだけです。
https://cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7 %9A%84%E7%B1%BB%E5%90%8D
3 番目のステップは、animate アニメーション スタイルのクラス名を設定することです。
animate の公式 Web サイトにアクセスして、お気に入りのアニメーション スタイルを見つけ、クラス名をコピーします。
https://アニメイト.スタイル/
以下に示すように:
アイコンをクリックしてクラス名をコピーします。
コピーしたら、先ほど書いたタグ内で使用し、クラス名に追加しますanimated。
空白の後に追加するアニメーションクラスの名前を追加します
**
注: ここでコピーされたクラス名はすべてこの形式です。animate__bounce以前のクラス名はanimate__削除する
**
以上
完了しました。成功を祈ります。