今回はボタンをクリックするたびにテキストがfadeInとfadeOutをするものを作ります。
イベントはVueですが、ほとんどはCSSが主になります。
サンプル
テキスト！テキスト！テキスト！テキスト！テキスト！テキスト！テキスト！テキスト！
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ボタンでフェードイン・フェードアウト</title>
<script src="https://unpkg.com/vue@2.5.17"></script>
</head>
<body>
<div id="app">
<button @click="isShown = !isShown">ボタン</button>
<transition name="test1">
<p v-show="isShown">テキスト！テキスト！テキスト！テキスト！テキスト！テキスト！テキスト！テキスト！</p>
</transition>
</div>
</body>
</html>
JavaScript
new Vue({
el: '#app',
data: function() {
return {
isShown: false
};
}
});
CSS
.test1-enter-active,
.test1-leave-active {
/* アニメーションの時間、イージングなどを設定 */
transition: opacity 500msease-out;
}
/* フェードイン */
.test1-enter {
/* フェードインの初期状態 */
opacity: 0;
}
.test1-enter-to {
/* フェードインの終了状態 */
opacity: 1;
}
/* フェードアウト */
.test1-leave {
/* フェードアウトの初期状態 */
opacity: 1;
}
.test1-leave-to {
/* フェードアウトの終了状態 */
opacity: 0;
}