<template>

<div>

<div>过渡效果</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: all .5s

}

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

  opacity: 0;

  transform: translate(100px,100px);

}

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

opacity: 1;

transform: translate(0px,0px);

}

</style>