vue使用animate.css

Posted 2021-11-30 luguankun

1.在main.js中引入animate.css

import ‘./assets/animate.css‘

2.使用transition标签包裹运动的元素,使用enter-active-class定义进入动画，使用leave-active-class定义离开动画，注意animate.css的所有动画要加animated这个类

   <transition enter-active-class="animated bounce" leave-active-class="animated hinge">
        <div class="box" v-show="show"></div>
    </transition>

例子：

<template>
<div>
    <transition enter-active-class="animated bounce" leave-active-class="animated hinge">
        <div class="box" v-show="show"></div>
    </transition>
    <button @click="toggle()">切换</button>
</div>
</template>
<script>
export default {
  name: "Home",
  data () {
    return {
        show:true
    };
  },
  methods:{
      toggle(){
          this.show = !this.show
      }
  }
}
</script>
<style lang="css" scoped>
.box{
    width: 300px;
    height: 300px;
    background-color: red;
    margin: 0 auto;
}
</style>