Vue官方文档（26):使用transition组件实现过渡效果

最新推荐文章于 2024-04-06 19:57:59 发布

amadeus_liu2

最新推荐文章于 2024-04-06 19:57:59 发布

阅读量104

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/127649241

版权

Vue 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

<template>
 <div >

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

 </div>


</template>

 <script>
 
 //import Vue from 'vue'


  export default{
    components: { 

    },
    data() {
      return {
        show: true,
              }
            },
  }
      
    </script>

<style >

.fade-enter-active, .fade-leave-active {
  transition: opacity 3.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
  

</style>