通过transition标签包裹实现

• 一个transition中只能放一个过渡元素(多个过渡元素只有第一个生效)
• 让进入页面就执行过渡效果,给transition标签添加appear属性

1.过渡的类名

单一过渡实现

<button v-on:click = "show = !show">点我</button>
<transition appear>
  <p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
    
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

多个不同的过渡

• 给transition添加name属性
• 过渡类名中的v换成name的属性值

<button v-on:click = "show = !show">点我</button>
<transition name = "fade" appear>
  <p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>
    
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

2.通过JavaScript 钩子实现过渡动画

• 注意执行done(),否则后面的after钩子函数不执行
• 如果刚打开页面就执行动画, done() 需要延时执行
• 如果使用钩子函数,需要给transition添加v-bind:css=“false”,否则他会去查找过渡的几个类名
• **在动画执行过程中必须写上 el.offsetWidth或者el.offserHeigh **

<button v-on:click = "show = !show">点我</button>
<transition  appear 
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter">
  <p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>

methods:{
  beforeEnter: function (el) {
    
  },
  enter: function (el, done) {
    el.style.transition:"all 3s"
    el.offserHeight
    done()
  },
  afterEnter: function (el) {
    el.style.maginLeft = "500px"
  },
}

使用velocity实现过渡动画(JavaScript 钩子实现)

• 导入velocity文件

<button v-on:click = "show = !show">点我</button>
<transition  appear 
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter">
  <p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>

methods:{
  beforeEnter: function (el) {
    
  },
  enter: function (el, done) {
    Velocity(el,{opcity:1,marginLeft:'500px'},3000)
    done()
  },
  afterEnter: function (el) {
    
  },
}

3. 使用自定义class名实现过渡动画(可以通过这种方式使用animate.css库)

• 导入animate.css文件

<button v-on:click = "show = !show">点我</button>
<transition  appear 
  enter-class=""
  enter-active-class="animated bounceOutRight"
  enter-to-class="">
  <p v-show = "show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p>
</transition>