Vue项目中如何使用动画特效
一、安装
在命令行中执行：使用npm或者cnpm安装
npm install animate.css --save 或 cnpm install animate.css --save
二、引入
在main.js全局引入
import animate from 'animate.css'
...
...
Vue.use(animate)//记得引入使用
三、页面使用
在index.vue中
<template>
<div class="box">
<button @click="toggleVisible">transition</button>
<!--方法一-->
<transition enter-active-class="animate__fadeIn" leave-active-class="animate__fadeOut">
<h1 v-show="visible" class="animate__animated">Animate.css</h1>
</transition>
<!--方法二-->
<transition enter-active-class="animate__animated animate__fadeInLeft"
leave-active-class="animate__animated animate__fadeOutLeft">
<h1 v-show="visible">Animate.css</h1>
</transition>
<!--方法三-->
<transition-group enter-active-class="animate__fadeInRight" leave-active-class="animate__fadeOutRight">
<h1 v-show="visible" class="animate__animated" :key="1">Animate.css</h1>
<h2 v-show="visible" class="animate__animated" :key="2">Just-add-water CSS animations</h2>
</transition-group>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
visible: false
}
},
methods: {
toggleVisible () {
this.visible = !this.visible
}
}
}
</script>
注意： 这里的v-if也可以用v-show代替。vue的动画效果的原理是CSS中的transition属性
还有就是v-enter、v-enter-active和v-leave、v-leave-to
到此就结束了，下面是补充拓展内容…
vue中的css动画原理
需要实现动画效果的标签需要
温馨提示： 更多高级用法请参考：官方文档
在Vue中同时使用过渡属性和动画
- 通过
appear实现页面的初次动画 - 如何既使用
animate.css的动画也使用transition过渡（文档：transition的使用） - 当两个动画同时使用时以谁的动画时间为准，定义
type来确定；除此还可以自定义动画时长
注意：不明白怎么使用的，一定要看文档
<template>
<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="visible">hello world</div>
</transition>
<button @click="toggleVisible">toggle</button>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
visible: false
}
},
methods: {
toggleVisible () {
this.visible = !this.visible
}
}
}
</script>
Vue中的Js动画与Velocity.js的结合
记得先引入velocity.js 官网链接
<template>
<div id="root">
<transition
name="fade"
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter"
>
<div v-show="visible">hello world</div>
</transition>
<button @click="toggleVisible">toggle</button>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
visible: false
}
},
methods: {
toggleVisible () {
this.visible = !this.visible
},
handleBeforeEnter (el) {
el.style.opacity = 0;
},
handleEnter (el, done) {
Velocity(el, {
opacity: 1
}, {
duration: 1000,
complete: done
})
},
handleAfterEnter (el) {
console.log("动画结束")
}
}
}
</script>
温馨提示：
- 使用vue中的js钩子来实现js动画效果(js钩子：JavaScript钩子)
velocity.js动画库实现动画效果（官网：velocity.js）
其中：before-enter、enter、after-enter就是vue中的js钩子，查看更多就点击上面链接
注意：不明白怎么使用的，一定要看文档
Vue中多个元素或组件的过渡
<template>
<div id="root">
//多个元素的动画过渡
<transition mode="out-in">
<div v-if="visible" 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>
</template>
<script>
Vue.component('child',{
template: 'child'
})
Vue.component('child-one',{
template: 'child-one'
})
export default {
name: 'App',
data () {
return {
visible: false,
type: 'child'
}
},
methods: {
toggleVisible () {
this.visible = !this.visible
},
handleClick1 () {
this.type = this.type === 'child' ? 'child-one' : 'child'
}
}
}
</script>
温馨提示：
- 多个元素的动画过渡：这里使用的是默认的过渡类名，也可以在
transition上添加name属性（文档：单元素/组件的过渡） - 多个组件的动画过渡：这里使用的是
component标签和:is插槽的用法（文档：内置的组件-component）
注意：不明白怎么使用的，一定要看文档
vue中的列表过渡
<template>
<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>
</template>
<script>
export default {
name: 'App',
data () {
return {
list: []
}
},
methods: {
handleBtnClick () {
this.list.push({
id:count++,
title: 'hello world'+" "+ count
})
}
}
}
</script>
温馨提示：
- 使用
transition-group来包裹列表，相当于在每个div上都加上了一个transition（文档：transition-group） - 循环列表的key最好不使用index
注意：不明白怎么使用的，一定要看文档
vue中的动画封装
<template>
<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>
</template>
<script>
Vue.component('fade', {
props: ['show'],
template:
`
`,
methods: {
handleBeforeEnter (el) {
el.style.color = 'red'
},
hanleEnter (el, done) {
setTimeout(()=>{
el.style.color = 'green'
done()
},2000)
},
}
})
export default {
name: 'App',
data () {
return {
show: false
}
},
methods: {
handleBtnClick () {
this.show = !this.show
})
}
}
}
</script>
温馨提示：
- 有两种封装动画效果的方法：css动画和js动画，推荐使用js动画，这样可以把动画效果封装成一个组件，不需要全局定义css样式