【Vue】通过Animate.css实现第三方动画效果示例（图文+实例）

一、安装Animate.css库

官网地址：

Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.https://animate.style/安装：

npm install animate.css --save

二、示例

 

 

 

<template>
  <!-- 组件一 -->
  <div class="demo">
    <transition-group
      name="animate__animated animate__bounce"
      enter-active-class="animate__swing"
      leave-active-class="animate__backOutUp"
      appear
    >
      <h2 v-show="!isShow" key="1">学校名称：{{ schoolName }}</h2>
      <h2 v-show="isShow" key="2">学校地址：{{ address }}</h2>
    </transition-group>
    <button @click="a_click">切换隐藏动画</button>
  </div>
</template>
<script>
import "animate.css";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data() {
    return {
      m_Name1: "张三",
      m_Name2: "李四",
      m_Name3: "王五",
      schoolName: "",
      address: "",
      isShow: false,
    };
  },
  methods: {
    a_click() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

 
<style scoped>
.demo {
  background-color: rgb(255, 255, 255);
  border: 1px rgb(172, 172, 172) solid;
  height: 420px;
  width: 400px;
  padding-left: 10px;
}
.demo button {
  height: 40px;
  width: 200px;
  font-size: 18px;
}
h2 {
  background-color: rgb(248, 229, 144);
  height: 50px;
  padding-left: 10px;
  color: black;
  line-height: 50px;
  width: 80%;
}
</style>