Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上：点击查看目录vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画Vue中的Js动画与Velocity.js的结合Vue中多个元素或组件的过渡vue中的列表过渡vue中的动画封装vue中的动画特效--总结vue中的css动画原理需要实现动画效果的标签需要<transition&g...
·
项目的源代码在GitHub上：点击查看
目录
vue中的css动画原理
需要实现动画效果的标签需要<transition>包裹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的CSS动画原理</title>
<script src="./vue.js"></script>
<style>
.fade-enter,.fade-leave-to {
opacity: 0;
}
.fade-enter-active ,.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="root">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function () {
this.show = (this.show === true ? false : true)
}
}
})
</script>
</body>
</html>注意：这里的v-if也可以用v-show代替。vue的动画效果的原理是CSSs中的transition属性
还有就是<transition>没有设置name属性，那么默认为v-enter、v-enter-active和v-leave、v-leave-to
在Vue中使用Animate.css库
- 必须使用class自定义名字的方式（enter-active-class="animated swing"，必须添加animated，然后第二个参数是动画效果的名字），来使用animate.css库
- 必须引入animate.css库文件（下载地址：animate.css库文件地址）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在Vue中的使用animate.css库</title>
<script src="./vue.js"></script>
<link rel="stylesheet" type="text/css" href="./animate.css"/>
<!--引入了animate.css库就不要自己写动画效果了，下面的都可以省略掉-->
</head>
<body>
<div id="root">
<transition
name="fade"
enter-active-class="animated swing"
leave-active-class="animated shake"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function () {
this.show = (this.show === true ? false : true)
}
}
})
</script>
</body>
</html>在Vue中同时使用过渡属性和动画
- 通过appear实现页面的初次动画
- 如何既使用animate.css的动画也使用transition过渡（文档：transition的使用）
- 当两个动画同时使用时以谁的动画时间为准，定义type来确定；除此还可以自定义动画时长
注意：不明白怎么使用的，一定要看文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在Vue中同时使用过渡属性和动画</title>
<script src="./vue.js"></script>
<link rel="stylesheet" type="text/css" href="./animate.css"/>
<!--引入了animate.css库就不要自己写动画效果了，下面的都可以省略掉-->
<style>
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="root">
<!--appear解决了第一次没有动画的,type="transition"设置以过渡效果的时长作为总时长-->
<!--:duration="10000"设置自定义动画播放的时常，:duration="enter: 5000,leave: 10000"设置入场和出场的动画时间-->
<transition
type="transition"
name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function () {
this.show = (this.show === true ? false : true)
}
}
})
</script>
</body>
</html>Vue中的Js动画与Velocity.js的结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的JS动画与velocity.js</title>
<script src="./vue.js"></script>
<script src="./velocity.js"></script>
</head>
<body>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick () {
this.show = !this.show
},
handleBeforeEnter (el) {
el.style.opacity = 0;
},
handleEnter (el, done) {
Velocity(el, {
opacity: 1
}, {
duration: 1000,
complete: done
})
},
handleAfterEnter (el) {
console.log("动画结束")
}
}
})
</script>
</body>
</html>- 使用vue中的js钩子来实现js动画效果(js钩子：JavaScript钩子)
- velocity.js动画库实现动画效果（官网：velocity.js）
其中：before-enter、enter、after-enter就是vue中的js钩子，查看更多就点击上面链接
注意：不明白怎么使用的，一定要看文档
Vue中多个元素或组件的过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中多个元素或组件的过渡</title>
<script src="./vue.js"></script>
<style>
.v-enter,.v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="root">
//多个元素的动画过渡
<transition mode="out-in">
<div v-if="show" key="hello">hello world</div>
<div v-else key="bye">Bye World</div>
</transition>
<button @click="handleClick">toggle</button>
//多个组件的动画过渡
<transition mode="out-in" >
<component :is="type"></component>
</transition>
<button @click="handleClick1">toggle</button>
</div>
<script>
Vue.component('child',{
template: '<div>child</div>'
})
Vue.component('child-one',{
template: '<div>child-one</div>'
})
var vm = new Vue({
el: "#root",
data: {
show: true,
type: 'child'
},
methods: {
handleClick () {
this.show = !this.show
},
handleClick1 () {
this.type = this.type === 'child' ? 'child-one' : 'child'
}
}
})
</script>
</body>
</html>- 多个元素的动画过渡：这里使用的是默认的过渡类名，也可以在transition上添加name属性（文档：单元素/组件的过渡）
- 多个组件的动画过渡：这里使用的是component标签和 :is插槽的用法（文档：内置的组件-component）
注意：不明白怎么使用的，一定要看文档
vue中的列表过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的列表过渡</title>
<script src="./vue.js"></script>
<style>
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="root">
<transition-group>
<!-- 这里尽量不使用index作为key -->
<div v-for="(item, index) of list" :key="item.id">
{{item.title}}
</div>
</transition-group>
<button @click="handleBtnClick">Add</button>
</div>
<script>
var count = 0;
var vm = new Vue({
el: "#root",
data:{
list: []
},
methods: {
handleBtnClick () {
this.list.push({
id:count++,
title: 'hello world'+" "+ count
})
}
}
})
</script>
</body>
</html>- 使用transition-group来包裹列表，相当于在每个div上都加上了一个transition（文档：transition-group）
- 循环列表的key最好不使用index
注意：不明白怎么使用的，一定要看文档
vue中的动画封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中的CSS动画原理</title>
<script src="./vue.js"></script>
<!-- css定义动画就没有必要了，我们这里使用js动画 -->
<!-- <style>
.fade-enter,.fade-leave-to {
opacity: 0;
}
.fade-enter-active ,.fade-leave-active {
transition: opacity 1s;
}
</style> -->
</head>
<body>
<div id="root">
<fade :show="show">
<div>hello world</div>
</fade>
<fade :show="show">
<h1>hello world</h1>
</fade>
<button @click="handleBtnClick">toggle</button>
</div>
<script>
Vue.component('fade', {
props: ['show'],
template:
`
<transition @before-enter="handleBeforeEnter"
@enter="hanleEnter">
<slot v-if="show"></slot>
</transition>
`,
methods: {
handleBeforeEnter (el) {
el.style.color = 'red'
},
hanleEnter (el, done) {
setTimeout(()=>{
el.style.color = 'green'
done()
},2000)
},
}
})
var vm = new Vue({
el: "#root",
data: {
show: false
},
methods: {
handleBtnClick: function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>- 有两种封装动画效果的方法：css动画和js动画，推荐使用js动画，这样可以把动画效果封装成一个组件，不需要全局定义css样式
vue中的动画特效--总结
- 这里把vue文档的进入/离开 & 列表过渡讲完啦（文档：进入/离开 & 列表过渡）
- 还有两个地方没有讲，动态过渡和状态过渡（有需要的自己查看文档）
瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手
更多推荐
18
0- 0
已为社区贡献1条内容
所有评论(0)