<div id="demo">
 <button v-on:click="show = !show">Toggle</button>
 <p v-if="show">蓝色理想</p>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

 <transition name="fade">
  <p v-if="show">蓝色理想</p>
 </transition>

<style>
.fade-enter{
 opacity:0;
}
.fade-enter-active{
 transition:opacity .5s;
}
.fade-leave-active{
 transition:transform .5s;
}
.fade-leave-to{
 transform:translateX(10px);
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

<style>
.bounce-enter-active{
 animation:bounce-in .5s;
}
.bounce-leave-active{
 animation:bounce-in .5s reverse;
}
@keyframes bounce-in{
 0%{transform:scale(0);}
 50%{transform:scale(1.5);}
 100%{transform:scale(1);}
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="bounce">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>

<style>
.fade-enter,.fade-leave-to{
 opacity:0;
}
.fade-enter-active,.fade-leave-active{
 transition:opacity 1s;
 animation:bounce-in 5s;
}
@keyframes bounce-in{
 0%{transform:scale(0);}
 50%{transform:scale(1.5);}
 100%{transform:scale(1);}
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade" type="transition">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true,
 },
})
</script>

<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css" rel="external nofollow" >
<div id="example">
 <button @click="show = !show">
  Toggle render
 </button>
 <transition name="xxx" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script src="/UploadFiles/2021-04-02/vue">

初始渲染过渡
可以通过 appear 特性设置节点的在初始渲染的过渡


<transition appear>
 <!-- ... -->
</transition>


这里默认和进入和离开过渡一样，同样也可以自定义 CSS 类名


<transition
 appear
 appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class" 
 appear-active-class="custom-appear-active-class"
>
 <!-- ... -->
</transition>


下面是一个例子


<style>
.custom-appear-class{
 opacity:0;
 background-color:pink;
 transform:translateX(100px);
} 
.custom-appear-active-class{
 transition: 2s;
}
</style>
<div id="demo">
 <button @click="reset">还原</button>
 <transition appear  appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class" 
 appear-active-class="custom-appear-active-class">
  <p>蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 methods:{
  reset(){
   history.go();
  }
 }
})
</script>


过渡时间
在很多情况下，Vue可以自动得出过渡效果的完成时机。默认情况下，Vue会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，可以拥有一个精心编排的一序列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果
在这种情况下可以用<transition>组件上的duration属性定制一个显性的过渡效果持续时间 (以毫秒计)
下面的代码意味着元素在进入enter和离开leave时，持续时间都为1s，而无论在样式中它们的设置值为多少


<transition :duration="1000">...</transition>


也可以分别定制进入和移出的持续时间


<transition :duration="{ enter: 500, leave: 800 }">...</transition>


比如，下面的代码中，进入和移出的效果都为animate.css里面的shake效果，但持续时间分别是0.5s和1s


<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition :duration="{ enter: 500, leave: 1000 }" name="xxx" enter-active-class="animated shake" leave-active-class="animated shake">
  <p v-if="show">小火柴的蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>


过渡条件
一般地，在Vue中满足下列任意一个过渡条件，即可添加过渡效果
条件渲染(使用v-if)
常见的条件是使用条件渲染，使用v-if


<style>
.fade-enter,.fade-leave-to{
 opacity:0;
}
.fade-enter-active,.fade-leave-active{
 transition:opacity 1s;
}
</style>
<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <p v-if="show">蓝色理想</p>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 data: {
  show: true
 }
})
</script>


条件展示(使用v-show)
使用条件展示，即使用v-show时，也可以添加过渡效果


<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <p v-show="show">蓝色理想</p>
 </transition>
</div>


动态组件
使用is属性实现的动态组件，可以添加过渡效果


<div id="demo">
 <button v-on:click="show = !show">Toggle</button>  
 <transition name="fade">
  <component :is="view"></component>
 </transition>
</div>
<script>
new Vue({
 el: '#demo',
 components:{
  'home':{template:'<div>蓝色理想</div>'}
 },
 data: {
  show: true,
 },
 computed:{
  view(){
   return this.show ? 'home' : '';
  }
 }
})


更多关于Vue动画效果的文章请点击下面的相关链接