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

transitionを利用してアニメーションを実現するサンプルコード

1. 環境
2. Transitionクラスについて
3. サンプルコード

環境

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>

<!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>

<!DOCTYPE html>

<html>

<head>

</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>

<h3>transition アニメーション</h3>

<button class="button" v-on:click="show=!show">toggle</button>

<p v-if="show">Hello World! nameなし</p>

</transition>

<p v-if="show">Hello World! name=fade</p>

</transition>

</div>

var app = new Vue({

el: '#app',

data: {

show: true

}

})

</script>

</body>

</html>

保存したファイルをブラウザで開いて確認。
「 toggle 」ボタンをクリックするとテキストがフェードイン＆フェードアウトされます

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

環境

Transitionクラスについて

サンプルコード

Vue.js Bootstrap-Vueを利用したプロジェクトの作成 2019.12.11

Hyper-VにFreeNasをインストールして利用する 2019.12.13