Vue过渡动画
- Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。
- Vue提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。
过渡时，会有6个类名在enter/leave的过渡中切换
- v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
- v- enter-active：定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation完成之后移除。
- v-enter-to：2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效（与此同时v- enter被移除），在过渡/动画完成之后移除。
- v-leave：定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
- v-leave-active：定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation完成之后移除。
- v-leave-to：2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效（与此同时v-leave被删除），在过渡/动画完成之后移除。
钩子函数
- 钩子函数可以结合CSStransitions/animations使用,也可以单独使用。
- 当只用 JavaScript过渡时,在 enter 和 leave 中必须使用done进行回调。否则,它们将被同步调用,过渡会立即完成。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.5/velocity.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click = "show = !show">
点我
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false">
<p v-if="show">
Vuejs 钩子函数动画
</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
show: false
},
methods: {
beforeEnter: function(el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function(el, done) {
Velocity(el, {opacity: 1, fontSize: '1.4em'},{ duration: 300})
Velocity(el, {fontSize: '1em'},{ complete: done})
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg'}, {duration: 600})
Velocity(el, { rotateZ: '100deg'}, { loop: 2})
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
},{ complete: done })
}
}
})
</script>
</body>
</html>
初始渲染过渡
- 可以通过 appear特性设置节点在初始渲染的过渡
- 右侧代码默认和进入/离开过渡一样,同样可以自定义CSS类名。
- 无论是 appear特性还是v-on:appear钩子都会生成初始渲染过渡。
多个元素过渡
- 当有相同标签名的元素切换时，需要通过
keyattribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在<transition>组件中的多个元素设置 key 是一个更好的实践。
多个组件过渡
- 多个组件的过渡简单很多 - 我们不需要使用 key attribute。相反，我们只需要使用动态组件
列表过渡
- 同时渲染整个列表，在这种场景中，使用
<transition-group>组件。
可复用的过渡
- 过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将
<transition>或者<transition-group>作为根组件，然后将任何子组件放置在其中就可以了。
动态过渡
- 在 Vue 中即使是过渡也是数据驱动的,动态过渡最基本的例子是通过 name特性来绑定动态值。
- 所有过渡 attribute 都可以动态绑定，但我们不仅仅只有 attribute 可以利用，还可以通过事件钩子获取上下文中的所有数据，因为事件钩子都是方法。
状态过渡
- 对于数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。
这里就做下笔记
官网上讲的很细，很多好看的demo https://cn.vuejs.org/v2/guide/transitions.html
