Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)

<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="https://www.jb51.com/vue"></script>
<script>
new Vue({
el: '#example',
data: {
show: true
}
})
</script>

初始渲染过渡

可以通过 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