Vue动画
- 概述:Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。
- 常用:
- 在css过渡和动画中自动应用class
- 在过渡钩子函数中使用JavaScript直接操作DOM
- 配合使用第三方CSS动画库,如Animate.css
- 过渡的类名:
- 总结
- v-enter:动画生效前(不起name属性,默认是v-开头)
- v-enter-to:动画生效后
- v-enter-active:动画生效期间,常用来挂transition:all 0.8s easy;【入场动画的时间段】
- v-leave:动画结束前
- v-leave-to:动画结束后
- v-leave-active:动画结束期间【离场动画的时间段】
- 使用:
- 应用类
- 单组件transition,<transition name="fade"></transition>,相关的6个类名要用fade-前缀
- .v-enter,.v-leave-to{} //描述进场和离场状态
- .v-enter-active,.v-leave-active{} //入场和离场的动画时间段
- 应用第三方css动画库,如Animate.css
-
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200"> <h3 v-if="flag" class="animated">这是一个H3</h3><!--记得用animated启动动画--> </transition>
-
- JS钩子
- 注意:
- 动画钩子函数的第一个参数:el,表示 要执行动画的那个DOM元素,是个原生的 JS
- el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
-
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }" > <h3 v-if="flag" class="animated">这是一个H3</h3> </transition>
- beforeEnter(el){ // beforeEnter 表示动画入场之前,此时,动画尚未开始,可以 在 beforeEnter 中,设置元素开始动画之前的起始样式 // 设置小球开始动画之前的,起始位置 el.style.transform = "translate(0, 0)" }
- enter(el, done){ // 这句话,没有实际的作用,但是,如果不写,出不来动画效果; // 可以认为 el.offsetWidth 会强制动画刷新 el.offsetWidth // enter 表示动画 开始之后的样式,这里,可以设置小球完成动画之后的,结束状态el.style.transform = "translate(150px, 450px)" el.style.transition = 'all 1s ease' // 这里的 done, 起始就是 afterEnter 这个函数,也就是说:done 是 afterEnter 函数的引用 done()}
- afterEnter(el){ // 动画完成之后,会调用 afterEnter // console.log('ok') this.flag = !this.flag}
- 注意:
- 列表动画
- <transition-group appeartag="ul">
- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup
- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性
- 给 transition-group 添加 appear 属性,实现页面刚展示出来时候,入场时候的效果
- 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签
- 应用类
- 总结