<template>

<div>

<div>Vue中DOM操作过度效果</div>

<div>---------------------</div>

<div id="demo">

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

<transition name="fades">

<p v-if="show">hello</p>

</transition>

</div>

</div>

</template>

<script>

export default{

data(){

return{ 

      show:true

      }

   }

}

</script>

<style>

.fades-enter-active, .fades-leave-active{

   transition:opacity .5s

}

.fades-enter, .fades-leave-to{

   opacity:0

}

</style>