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属性

还有就是<transition>没有设置name属性，那么默认为v-enter、v-enter-active和v-leave、v-leave-to

---

到此就结束了，下面是补充拓展内容…

---

vue中的css动画原理
需要实现动画效果的标签需要<transition>包裹

---

温馨提示： 更多高级用法请参考：官方文档

---

在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: '<div>child</div>'
 })
 
Vue.component('child-one',{
    template: '<div>child-one</div>'
 })
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:
       `<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)
           },
         }
       }) 
export default {
  name: 'App',
  data () {
    return {
	   show: false
    }
  },
  methods: {
    handleBtnClick () {
           this.show = !this.show
        })
    }
  }
}
</script>

温馨提示：

• 有两种封装动画效果的方法：css动画和js动画，推荐使用js动画，这样可以把动画效果封装成一个组件，不需要全局定义css样式