Vue使用Animate.css实现动画效果

1、安装引入Animate.css

npm install animate.css --save

2、在main.js中导入并全局使用Animate.css：

import animated from 'animate.css'

Vue.use(animated)

<template>
  <div class="hello">
    <h1 class="test1">向右快速淡入</h1>
    <h2 class="test2">向左快速淡入</h2>
    <h3 class="test3">向下淡入</h3>
    <h4 class="test4" @click="isNu">向上淡入</h4>
    <transition
      enter-active-class="fadeInLeft"
      leave-active-class="fadeOutRightBig"
    >
      <P v-if="isNum" class="" style="font-size:30px">我是一只小小鸟</P>
    </transition>
    <div>
      {{ msg | bigMgs }}
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      isNum: false,
      msg: "Welcome to Your Vue.js App",
    };
  },
  filters: {
    bigMgs: function (value) {
      return value.toUpperCase()
    }
  },
  methods: {
    isNu () {
      this.isNum = !this.isNum
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  height: 2000px;
}
.test1 {
  animation-name: fadeInLeftBig;
  animation-duration: 3s;
  /*animation:turn 1s linear infinite;*/
}
.test2 {
  animation-name: fadeInRightBig;
  animation-duration: 3s;
  /*animation:turn 1s linear infinite;*/
}
.test3 {
  animation-name: fadeInDown;
  animation-duration: 3s;
  /*animation:turn 1s linear infinite;*/
}
.test4 {
  animation-name: fadeInUp;
  animation-duration: 3s;
  /*animation:turn 1s linear infinite;*/
}
.fadeInLeft {
  animation-name: fadeInLeft;
  animation-duration: 3s;
  /* animation:turn 1s linear infinite; */
}
.fadeOutRightBig {
  animation-name: fadeOutRightBig;
  animation-duration: 3s;
  /* animation:turn 1s linear infinite; */
}
</style>