Vue中引入animate.css

首先
安装下animate.css

npm install animate.css --save

然后在vue文件的script中引入：

import $ from '../assets/js/jquery.js';//非必要
import animate from 'animate.css'

代码例子：

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group
			appear
			name="animate__animated animate__bounce"
			enter-active-class="animate__bounceInLeft"
			leave-active-class="animate__animate__backOutRight"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">无忧！</h1>
		</transition-group>
	</div>
</template>

<script>
//引入animate.css
	import 'animate.css'
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}


</style>

注意点

这里name="animate__animated animate__bounce"是animate默认的，其中animate__animated是默认的，后面是animate__+动画风格

以下是animate.css官网给的动画风格和具体的动画效果，具体的可以去官网看
animate.css官网

##Attention seekers 动画风格
bounce
flash
pulse
rubberBand
shakeX
shakeY
headShake
swing
tada
wobble
jello
heartBeat
##Back entrances
backInDown
backInLeft
backInRight
backInUp
##Back exits
backOutDown
backOutLeft
backOutRight
backOutUp
##Bouncing entrances
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
##Bouncing exits
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
##Fading entrances
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeInTopLeft
fadeInTopRight
fadeInBottomLeft
fadeInBottomRight
##Fading exits
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
fadeOutTopLeft
fadeOutTopRight
fadeOutBottomRight
fadeOutBottomLeft
##Flippers
flip
flipInX
flipInY
flipOutX
flipOutY
##Lightspeed
lightSpeedInRight
lightSpeedInLeft
lightSpeedOutRight
lightSpeedOutLeft
##Rotating entrances
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
##Rotating exits
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
##Specials
hinge
jackInTheBox
rollIn
rollOut
##Zooming entrances
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
##Zooming exits
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
##Sliding entrances
slideInDown
slideInLeft
slideInRight
slideInUp
##Sliding exits
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
##Copy class name to clipboard
https://animate.style

最后附上Vue中队过度动画的解释：

## Vue封装的过度与动画

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2. 图示：<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />

3. 写法：

   1. 准备好样式：

      - 元素进入的样式：
        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点
      - 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点

   2. 使用```<transition>```包裹要过度的元素，并配置name属性：

      ```vue
      <transition name="hello">
      	<h1 v-show="isShow">你好啊！</h1>
      </transition>
      ```

   3. 备注：若有多个元素需要过度，则需要使用：```<transition-group>```，且每个元素都要指定```key```值。

Vue官网对过渡动画的解释和例子请点击下面的链接
Vue官网对过度动画