详解 Vue 过渡 transition 动画 animation 并结合第三方库 animation.css 和 gsap

transition   vue过渡组件

标签自带类名

触发时机	默认类名	自定义类名	自定义行内式类名 方便结合第三方库	transition 钩子 接收参数el enter 和leave 第二个参数 done 可以 决定  after-enter  after-leave 的 周期内的执行时机
v-if	进入	进入	进入	进入
v-show	v-enter-from v-enter-active v-enter-to	xxx-enter-from xxx-enter-active xxx-enter-to	enter-from-class enter-active-class enter-to-class	@before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled"
	离开	离开	离开	离开
标签元素	v-leave-from v-leave-active v-leave-to	xxx-leave-from xxx-leave-active xxx-leave-to	leave-class leave-active-class leave-to-class	@before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled"

在 xxx-enter-active    xxx-leave-active  时可以做 一些过度属性

.slide-leave-from {
  width: 200px;
  height: 200px;
}
.slide-leave-active {
  transition: all 1s;
  animation: bounce-in 0.5s reverse;
}
.slide-leave-to {
  width: 0;
  height: 0;
}

 使用自定义类名后  enter-from-class="from"  enter-to-class = "to"

.from {
  width: 0;
  height: 0;
}
.slide-enter-active {
  transition: all 1s;
  animation: bounce-in 0.5s;
}
.to {
  width: 200px;
  height: 200px;
}

代码

使用动画库 animate.css

animate.css 官网

npm install animate.css --save
import "animate.css";  //组件中引入

使用时 加固定前缀 animate__animated  后面的类名按官网需求添加

An animated element

效果

 

学习 gsap 动画库 ☆ ☆ ☆ ☆ ☆  有助于学习 three.js 

greensock 绿袜官网

 

 结合  transition 生命周期 和 gsap

let beforeEnter = (el) => {
  gsap.set(el,{
   background:'#ccc'
  })
};
let enter = (el,done) => {
    gsap.set(el,{
        backgroundColor:'pink'
    })
};
let afterEnter = () => {
  console.log(555);
};
let leave = (el,done)=>{
    gsap.set(el,{
        backgroundColor:'#ccc'
    })

}