Vue中使用 transition动画，vue过渡动画

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xm1037782843/article/details/88312291

Vue的动画并没有非常炫酷的效果，不过也是有一些实用性的，在项目中有的地方使用，也是能够营造出不同的效果

下面为大家列举两个简单实现动画的例子，动画其实很简单，就是利用transition标签

案例;点击按钮 实现内容切换---动画显示是淡隐淡出的效果

<style>
.fade-enter, .fade-leave-to {
  opacity: 0
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
</style>

<div id="demo">
  <button v-on:click="show = !show">
     切换按钮
  </button>
 <!--1. 使用transition元素把需要被动画控制的元素，包裹起来  里面name="fade"上面class就是fade开头-->
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
<script>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
</script>

如果name="fade" 不存在  就默认是 v-enter v-leave ...

class定义：

.fade-enter{ } 进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)

.fade-enter-active{ } 进入过渡的结束状态，元素被插入时就生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

.fade-leave{ } 离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；

.fade-leave-active{ } 离开过渡的结束状态，元素被删除时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

二、自定义过度类名

<style>
.fade-in-active, .fade-out-active{
    transition: all 0.5s ease 
} 
.fade-in-enter, .fade-out-active{
     opacity: 0 
}
</style>
<transition 
    name="fade"
    enter-class="fade-in-enter"
    enter-active-class="fade-in-active"
    leave-class="fade-out-enter"
    leave-active-class="fade-out-active"
  >
    <p v-show="show">hello</p>
</transition>