こんにちは！Yoshiです！
この記事は、前回のVueの私が学んだごく一部の内容の記事の続きとなります。
HTML, CSS, JavaScript, Vueの基本的なことが分かっている前提で書かれているため、予めご了承ください。
Udemyの「超Vue.js 完全ガイド2026 (Vue Router, Pinia含む)」という講座やVueの公式サイトを主に参考にして作りました。
分かりやすい内容になるように努めましたので、最後まで読んでいただけると幸いです！
§５：Vueでアニメーションを作る
・transition：要素の2つの状態間の変化の仕方を定義するCSSプロパティ
・例えば、[12.1.0]を作る等して、ブラウザの画面でボタン押すと
[12.1.1]のように、要素の透明度が変わる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script setup lang="ts"> import { ref } from 'vue' const changeOpacity = ref(true) </script> <template> <div :class="{ 'opacity-0': changeOpacity, 'opacity-1': !changeOpacity }" > この文の透明度が変わる </div> <button @click="changeOpacity = !changeOpacity">透明度を変える</button> </template> <style scoped> div { transition: opacity 1s; } .opacity-0 { opacity: 0.8; } .opacity-1 { opacity: 0.5; } </style> |
・また[12.1.0]のdiv要素にv-if=”changeOpacity”をつけてボタンを押すとトランジションは起きずにdiv要素が消える。トランジションを起こしてからdiv要素を消したいなどの場合
トランジションコンポーネントを使えば良い。
・トランジションコンポーネント：要素などがDOMに挿入、削除される時にアニメーションを適用するコンポーネント
・トランジションクラス：要素をDOMに挿入（enter）、DOMから削除（leave）するために使う、v-enter-fromからv-leave-toまでの6このクラス。（cf. [12.2.0]）
・例えば、[12.2.0]を作るなどして、ブラウザの画面でボタンを2回押すと、[12.2.1]のように動く。
ちなみにopacityの既定値は1なので、.v-enter-to{}等を書く必要はないが、トランジションの流れを分かりやすくするために書いた。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<script setup lang="ts"> import { ref } from 'vue' const show = ref(true) </script> <template> <Transition> <p v-if="show">Hello</p> </Transition> <button @click="show = !show">Toggle</button> </template> <style scoped> .v-enter-from { opacity: 0; } .v-enter-active { transition: opacity 2s; } .v-enter-to { opacity: 1; } .v-leave-from { opacity: 1; } .v-leave-active { transition: opacity 2s; } .v-leave-to { opacity: 0; } </style> |
・カスタムトランジションクラス：enter-from-classからleave-from-classまでの6この属性。従来のクラス名を変えることができ、Animate.css などの既存の CSS アニメーションライブラリと組み合わせることができる。
・例えば、VSCodeのターミナルなどで「npm install animate.css –save」を実行し
main.tsに「import ‘animate.css’;」を書き
[12.3.0]を作るなどして、ブラウザの画面でボタンを押すと
[12.3.1]のように、要素が左右に動いてから要素が消える。
|
1 2 3 4 5 6 7 8 9 10 |
<script setup lang="ts"> import { ref } from 'vue' const show = ref(true) </script> <template> <Transition leave-active-class="animate__animated animate__shakeX"> <p v-if="show">Hello</p> </Transition> <button @click="show = !show">Toggle</button> </template> |
[12.3.1] ブラウザの画面
・トランジションタグ内に「name=”付けたい名前”」を書くことで、スタイル要素内のvの代わりに付けた名前を使うことができる。
・また、[12.4.0]の場合、ブラウザの画面でボタンを１回押すと[12.4.1]のようにDOMへの挿入とDOMからの削除が同時に始まってしまう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script setup lang="ts"> import { ref } from 'vue' const show = ref(true) </script> <template> <Transition name="fade"> <p v-if="show">ON</p> <p v-else>OFF</p> </Transition> <button @click="show = !show">Toggle</button> </template> <style scoped> .fade-enter-from { /* ここからは[12.2.0]と同様のコードなので省略する */ |
DOMからの削除を終えてからDOMへの挿入を始めたい場合、トランジションタグ内に「mode=”out-in”」を書き、ボタンを押すと、[12.5.1]のように動く。
[12.5.1] ブラウザの画面・トランジションコンポーネントに、@before-enter=””や@after-leave=””などのイベントハンドラを持たせることができる。
今回の場合、イベントはトランジション。
・例えば[12.6.0]を作る等すると
[12.6.1]のようにトランジションと要素の左右への移動が同時に起こる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<script setup lang="ts"> import { ref } from 'vue' const show = ref(true) function beforeEnter(el) { console.log('beforeEnter', el) el.style.transform = 'translateX(30px)' } function enter(el) { console.log('enter', el) let translateXVal = 30 const intervalId = setInterval(() => { translateXVal -= 1 el.style.transform = `translateX(${translateXVal}px)` if (translateXVal === 0) { clearInterval(intervalId) } }, 20) } function afterEnter(el) { console.log('afterEnter', el) } function beforeLeave(el) { console.log('beforeLeave', el) } function leave(el) { console.log('leave', el) let translateXVal = 0 const intervalId = setInterval(() => { translateXVal += 1 el.style.transform = `translateX(${translateXVal}px)` if (translateXVal === 30) { clearInterval(intervalId) } }, 20) } function afterLeave(el) { console.log('afterLeave', el) } </script> <template> <Transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" > <p v-if="show">Hello</p> </Transition> <button @click="show = !show">Toggle</button> </template> <style scoped> .fade-enter-from { /* ここからは[12.2.0]と同様のコードなので省略する */ |
ここで私の記事は、そしてVueのまとめはひとまず終了となります。
読んでいただきありがとうございました！
