Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div class="transition">
- <button @click="isActive= !isActive">トランジション</button>
- <transition>
- <div v-if="isActive">こんにちは!</div>
- </transition>
- </div>
- </template>
- <script>
- export default {
- data(){
- return{
- isActive: false
- }
- }
- }
- </script>
- <style scoped>
- .v-enter-active{
- transition: opacity 1s;
- }
- .v-leave-active{
- transition: opacity 1s;
- }
- .v-enter{
- opacity: 0;
- }
- .v-leave-to{
- opacity: 0;
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement