Vue使用第三方库实现动画效果：animate.css使用方法和教程案例

离奇6厘米

已于 2022-08-31 20:19:18 修改

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： css javascript vue

于 2022-08-30 22:50:45 首次发布

本文链接：https://blog.csdn.net/Vest_er/article/details/126614041

版权

vue 专栏收录该内容

37 篇文章 58 订阅

订阅专栏

一、基本使用

animate.js库的网址：https://animate.style/

1、安装animate.css库

npm i animate.css

2、引入animate.css库

import 'animate.css';

3、基础用法

name="animate__animated animate__bounce"必须配置

 <transition name="animate__animated animate__bounce">

4、配置样式

通过enter-active-class和leave-active-class实现不同样式配置

<transition 
	name="animate__animated animate__bounce" 
	enter-active-class="animate__swing" 
	leave-active-class="animate__fadeOutTopLeft"
>
...
</transition>

官网选择样式（右侧）
在这里插入图片描述

二、案例练习

<template>
  <div>
    <button @click="changeShow">显示与隐藏</button>
    <transition
      name="animate__animated animate__bounce"
      enter-active-class="animate__swing"
      leave-active-class="animate__fadeOutTopLeft"
    >
      <h3 v-show="isShow">你好，小猫咪</h3>
    </transition>
  </div>
</template>

<script>
//引入animate库
import "animate.css";
export default {
  name:"Demo2",
  data(){
    return {
      isShow:true
    }
  },
  methods:{
    changeShow(){
      this.isShow=!this.isShow
    }
  }
}
</script>