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=”{ enter: 200, leave: 400 }”>
- enter-active-class=”bounceIn”
- leave-active-class=”bounceOut”
- :duration=”{ enter: 200, leave: 400 }” :duration=”200″
- 记得启用动画得加.animated
-
JS钩子
-
注意：
- 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS
- el 是通过 document.getElementById(”) 方式获取到的原生JS DOM对象
- <transition
- v-on:before-enter=”beforeEnter”
- v-on:enter=”enter”
- v-on:after-enter=”afterEnter”
- v-on:enter-cancelled=”enterCancelled”
- v-on:before-leave=”beforeLeave”
- v-on:leave=”leave”
- v-on:after-leave=”afterLeave”
- v-on:leave-cancelled=”leaveCancelled”
- >
- 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 标签
-
应用类
-
总结
版权声明：本文为laomi233原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。