Vue.js transition ラッパーコンポーネントのサンプルコード
- 2019.12.12
- Vue.js
- transition, Vue.js, サンプルコード

transitionを利用してアニメーションを実現するサンプルコード
環境
- OS Windos10
- エディタ VScode
Transitionクラスについて
v-enter v-enter-active v-enter-to が表示に関連するクラス
v- leave v- leave active v- leave -to が非表示に関連するクラス
これらのクラスに記述してゆき、アニメーションを実装する。

サンプルコード
下記のソースコードをindex.htmlとして作成する
vue.jsは開発バージョンを利用してます
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <style> .style1 { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 120px; } h3 { margin: 40px 0 0; color: #41B883; } .button { display: block; position: relative; margin: 0 auto; width: 100pt; border: solid 1px silver; border-radius: 0.5rem 0.5rem; padding: 0.5rem 1.5rem; margin-top: 1rem; text-decoration: none; } /*transition nameがない時はv-が先頭につく */ v-enter-active, .v-leave-active { transition: opacity 1s; } .v-enter, .v-leave-to { opacity: 0; } /*transition nameがある時 name="fade"が先頭につく*/ .fade-enter-active, .fade-leave-active { transition: opacity 1s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> <body> <div id="app" class="style1"> <h3>transition アニメーション</h3> <button class="button" v-on:click="show=!show">toggle</button> <transition> <p v-if="show">Hello World! nameなし</p> </transition> <transition name="fade"> <p v-if="show">Hello World! name=fade</p> </transition> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { show: true } }) </script> </body> </html> |
保存したファイルをブラウザで開いて確認。
「 toggle 」ボタンをクリックするとテキストがフェードイン&フェードアウトされます

-
前の記事
Vue.js Bootstrap-Vueを利用したプロジェクトの作成 2019.12.11
-
次の記事
Hyper-VにFreeNasをインストールして利用する 2019.12.13
コメントを書く