04vue开发-动画

动画

• 使用 transition 元素，把需要被动画控制的元素，包裹起来

• v-enter 进入之前

• v-enter-to 进入之后

• v-enter-active 入场动画时间段

• v-leave 离开前

• v-leave-to 立候的终止状态，此时动画已经结束

• v-leave-active 离场动画时间段

  列表动画：

• 实现列表过渡，若是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup ,且每项需要 :key=“item.id” 属性

• .v-move{} .v-leate-active{position:absolute;} :配合使用可以实现列表后续元素，渐渐的效果

• ... appear : 可以实现进入页面列表飘入的效果

• ... tag="ul" : 可以实现渲染列表

钩子函数 实现半场动画

• before-enter
• enter
• after-enter
• enter-cancelled

---

• before-leave
• leave
• after-leave
• leave-cancelled

el.offsetWidth 会展示动画执行过程

enter(el,done){

​ ......

​ done(); //这里的 done ,就是 afterEnter 函数的引用，立即执行afterEnter函数，否则有延迟

}

afterEnter(el){

}

• transform : 改变，变形

  translate：翻译，转化

  transition：过渡

  el.style.transform='translate(0,0)'

  el.style.transition='all 1s ease'