🖥
Nuxt2 – vue-closable + transition でフェードイン・フェードアウトのアニメーションをするコード例
ポイント
- 表示を切り替えたいエリアを
<transition>
で囲む -
<trantision name="xxx">
の name に対して CSS のプロパティの名前を合わせる ( 例:xxx-enter-to
)
例
<template>
<div id="app">
<button ref="button" class="toggle-button" @click="showPopup = !showPopup">
TOGGLE
</button>
<transition name="opacity">
<div v-show="showPopup" v-closable="{
exclude: ['button'],
handler: 'onClose'
}" class="popup-box">
Test Popup Box
</div>
</transition>
</div>
</template>
<script>
import Vue from 'vue'
import VueClosable from 'vue-closable'
Vue.use(VueClosable)
export default {
data() {
return {
showPopup: false
}
},
methods: {
onClose() {
this.showPopup = false
}
}
}
</script>
<style scoped>
.opacity-enter {
opacity: 0;
}
.opacity-enter-active {
transition: opacity 1s;
}
.opacity-enter-to {
opacity: 1;
}
.opacity-leave {
opacity: 1;
}
.opacity-leave-active {
transition: opacity 1s;
}
.opacity-leave-to {
opacity: 0;
}
</style>
表示例
環境
@nuxt/cli v2.15.8
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2023-01-05
Discussion