前回の記事「CSS3を使って簡単なページレイアウトを作成する方法をステップバイステップで教えます(詳細なコード説明)」では、CSS3を使って簡単なページレイアウトを作成する方法を紹介しました。ページレイアウト。以下の記事では、Vue を使ってアニメーション効果を実現する方法を紹介しますので、困っている方は参考にしていただければ幸いです。
#公式 API アドレス: https://cn.vuejs.org/v2/guide/transitions.html公式
デモクリックして表示/非表示
<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> <script> new Vue({ el: "#demo", data: { show: true, }, }); </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-active { opacity: 0; } </style>
使用
<transition name="fade"> (元素,属性、路由....) </transition>
クラス<strong></strong>
Definition
.fade-enter{ }トランジションの開始状態を入力します。これは要素が挿入されたときに有効になり、フレームを 1 つだけ適用するとすぐに削除されます。 ; (モーションの初期状態)
.fade-enter-active{ }トランジションの終了状態を入力します。これは要素が挿入されたときに有効になり、t# の後に削除されます。 ##アニメーション/アニメーション##が完成しました。このクラスは、遷移プロセス時間、遅延、および曲線関数を定義するために使用できます。
.fade-leave{ }
.fade-leave-active{ }
transition/animation が完了すると削除されます。このクラスは、遷移プロセス時間、遅延、および曲線関数を定義するために使用できます。
カスタマイズされた遷移クラス名
.fade-in-enter
.fade-in-active
になります。 .fade-out-enter
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><transition
name="fade"
enter-class="fade-in-enter"
enter-active-class="fade-in-active"
leave-class="fade-out-enter"
leave-active-class="fade-out-active"
>
<p v-show="show">hello</p>
</transition></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.fade-in-active,
.fade-out-active {
transition: all 0.5s ease;
}
.fade-in-enter,
.fade-out-active {
opacity: 0;
}</pre><div class="contentsignin">ログイン後にコピー</div></div>
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" > <div v-show="show"></div> </transition> <script> export default { methods: { beforeEnter(el) { console.log("动画enter之前"); }, enter(el) { console.log("动画enter进入"); }, afterEnter(el) { console.log("动画进入之后"); el.style.background = "blue"; }, beforeLeave(el) { console.log("动画leave之前"); }, leave(el) { console.log("动画leave"); }, afterLeave(el) { console.log("动画leave之后"); el.style.background = "red"; }, }, }; </script>
transition
##と組み合わせる#animate.css
次のコードは、X 軸をベースラインとして要素を反転および反転させるアニメーションを示しています。Animate.css
ライブラリ ポイントは次のとおりです。アドレス: https://animate.style/<!-- 翻转进场出场--> <transition enter-active-class="flipInX" leave-active-class="flipOutX"> <div v-show="show" class="animated"></div> </transition> <!-- 或者 --> <transition enter-active-class="animated flipInX" leave-active-class="animated flipOutX" > <div v-show="show"></div> </transition>ログイン後にコピーリスト遷移
グループ化する場合、キーの値がアニメーションに直接影響することに注意してください。トランジションの詳細については、vue アニメーション キー値がトランジション アニメーションのパフォーマンスに影響するを参照してください
<transition-group enter-active-class="flipInX" leave-active-class="flipOutX"> <div v-show="show" :key="x" v-for="x in 5"></div> </transition-group>ログイン後にコピー推奨学習: JavaScript ビデオ チュートリアル
以上がVue を使用してアニメーション効果を実現する方法を説明します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。