vue 动画的挂载方式
2018-12-22 本文已影响0人
94very
声明
该文章仅用于个人学习，文中内容均来在 vue.js 官网，在此记录只是便于个人的理解
Vue.js 官网(下面内容的来源)https://cn.vuejs.org/v2/guide/transitions.html
简要
Vue 中有对 DOM 进行的过渡效果操作，感觉是对数据的呈现，更新，删除等一系列操作设定过渡的动画，更偏向于对数据的操作
使用过渡对元素的各个周期进行不同动画的定义
1. css 书写动画用过渡来确定动画执行的时期
2. 第三方动画库引入，通过自定义过渡来确定动画执行的时期
3. 在 methods 中通过 js 书写动画，通过 JavaScript 钩子来挂载动画
使用 css 书写动画时，需要用过渡来用于挂载动画
v-enter: 进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active: 进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之
前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的
过程时间，延迟和曲线函数。
v-enter-to: 进入过渡的结束状态。在元素被插入之后下一帧生效(此时 v-enter 被移除)
在过渡/动画完成之后移除。
v-leave: 离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active: 离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触
发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过
渡的过程时间，延迟和曲线函数。
v-leave-to: 离开过渡的结束状态。在离开过渡被触发之后下一帧(此时 v-leave 被移除)，
在过渡/动画完成之后移除。
每个过渡对应着元素显示或移除的各个时期
1-2-1.PNG
如下(该例子来自 vue 官网上)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<title>列表的进入/离开过渡</title>
<style media="screen">
.fade-enter-active{
transition: all 0.3s ease;
}
.fade-leave-active {
transition: all 0.8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fade-enter, .fade-leave-to {
transform: translateX(40px);
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="show =! show">
Toggle
</button>
<hr>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
show: true
}
})
</script>
</body>
</html>
解释
1. 通过 script 标签从 cdn 中引入
2. transition 包裹了要过渡的元素
3. show =! show 将 show 取反，再用于 v-if 的判断是否显示
4. 使用的是 css 进行动画过渡
还可以引用第三方动画库的动画，这里需要用到自定义过渡类名
自定义过渡的类名
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
对应的时期与上面的列出来的过渡的类名的时期相对应
如下(该例子来自 vue 官网上)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<title>列表的进入/离开过渡</title>
</head>
<body>
<div id="example-3">
<button @click="show =! show">
Toggle render
</button>
<hr>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
<script>
var vm = new Vue({
el: "#example-3",
data: {
show: true
}
})
</script>
</body>
</html>
解释
1. 通过 link 标签引入第三方动画库
2. 自定义过渡的类名，将第三方动画引入在适用的时期
3. 通过 v-if 控制显示与移除
使用 methods 方法和 vue 过渡钩子来挂载动画
vue 过渡钩子
// 过渡动画进入时
before-enter 进入前
enter 进入中
after-enter 进入后
enter-cancelled 取消时被调用
// 过渡动画离开时
before-leave 离开前
leave 离开中
after-leave 离开后
leave-cancelled 取消时被调用
如下(该例子来自 vue 官网上)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<title>列表的进入/离开过渡</title>
</head>
<body>
<div id="example-4">
<button @click="show =! show">
Toggle
</button>
<hr>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">Demo</p>
</transition>
</div>
<script>
var vm = new Vue({
el: "#example-4",
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>
解释
1. 通过 script 标签将 velocity 引入
2. 在 transition 中用过渡钩子挂载动画函数
3. 在 methods 中书写动画函数
4. duration 定制了时间(单位毫秒)
