vue 入门笔记 12 Vue 过度动画
Vue 过度动画
Vue 过度
1，利用 class 名称
2，利用 css 动画库
3，钩子函数 （生命周期函数）
4，第三方 js 库
5，多元素过度
1，利用 class 名称
Vue 提供的 transition 组件
在进入/离开的过渡中，会有 6 个 class 切换。
1 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3 v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4 v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5 v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6 v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#box {
width: 300px;
height: 300px;
background: aquamarine;
},
.fade-leave-active /* .fade-leave-active */{
transition: 1s;
},
.fade-leave-to/* .fade-leave-to */{
opacity: 0;
},
.fade-enter{
},
.fade-enter-active{
}
</style>
<body>
<div id="app">
<button v-on:click="buttonclick">按钮</button>
<transition name="fade">
<div id=box v-show="showbox">
</div>
</transition>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
showbox: true
},
methods: {
buttonclick: function() {
console.log("buttonclick");
this.showbox = !this.showbox;
}
},
computed: {
}
})
</script>
</body>
</html>
2，利用 css 动画库
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#box {
width: 300px;
height: 300px;
background: aquamarine;
}
</style>
<link rel="stylesheet" href="bower_components/animate.css/animate.css" >
<body>
<div id="app">
<button v-on:click="btnclick"> Button </button>
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<div id="box" v-show="btncilck"></div>
</transition>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
btncilck: true
},
methods: {
btnclick: function() {
this.btncilck = !this.btncilck;
//console.log("this.btncilck:"+this.btncilck)
}
},
computed: {
}
})
</script>
</body>
</html>
3，钩子函数 （生命周期函数）
可以在属性中声明 JavaScript 钩子
<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"
>
<!-- ... -->
</transition>index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#box {
width: 12.5rem;
height: 12.5rem;
background: #7FFFD4;
}
.fade-enter-active, .fade-leave-active{
transition: 1.5s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
</style>
<body>
<div id="app">
<button v-on:click="show = !show">button</button>
<transition name=fade
v-on:before-enter="beforeEnter"
v-on:after-enter ="afterEnter"
v-on:before-leave="beforeLeave"
>
<div id="box" v-show="show">
</transition>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
show: true
},
methods: {
beforeEnter:function(el){
console.log("beforeEnter");
el.innerHTML ="进入之前！";
},
afterEnter:function(el){
console.log("afterEnter");
el.innerHTML +="\r\n进入之后！";
},
beforeLeave:function(el){
console.log("beforeLeave");
}
},
computed: {
}
})
</script>
</body>
</html>
4，第三方 js 库
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#box {
width: 12.5rem;
height: 12.5rem;
background: #7FFFD4;
}
</style>
<body>
<div id="app">
<button v-on:click="show = !show">button</button>
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
<div id="box" v-show="show">
</transition>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
show: true
},
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
})
}
},
computed: {
}
})
</script>
</body>
</html>
5，多元素过度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="bower_components/animate.css/animate.css" >
</head>
<style>
#box {
width: 300px;
height: 300px;
background: aquamarine;
}
</style>
<body>
<div id="app">
<button v-on:click="btnclick"> Button </button>
<transition-group
enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"
>
<div id="box" :key="1" v-show="btncilck"></div>
<div id="box" v-bind:key="2" v-show="btncilck"></div>
</transition-group>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
btncilck: true
},
methods: {
btnclick: function() {
this.btncilck = !this.btncilck;
//console.log("this.btncilck:"+this.btncilck)
}
},
computed: {
}
})
</script>
</body>
</html>