vue中使用animate.css库

1、@keyframes
keyframes翻译成中文，是"关键帧"的意思，使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。
– 自定义实现
下面我们来看一个例子，要实现的效果是文字弹跳放大在缩小显现和隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>在vue中使用Animate.css库</title>
  <link rel="stylesheet" href="./animate.css">
  <script src="../node_modules/vue/dist/vue.js"></script>
  <style>
    @keyframes bounce-in {
      0% {
        transform:scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
    .zl { /*在div隐藏的过程中这个class是一直存在的*/
      transform-origin: left center;
      animation: bounce-in 1s;
    }
    .gyz{   /*在div显示的过程中这个class是一直存在的*/
      transform-origin:left center;
      animation: bounce-in 1s reverse;
    }
  </style>
</head>
<body>
<div id="root">
  <transition name="fade" enter-active-class="zl" leave-active-class="gyz">
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">change</button>
</div>
<script>
  var vm=new Vue({
    el:"#root",
    data:{
      show:true
    },
    methods:{
      handleClick:function () {
        this.show=!this.show
      }
    }
  })
</script>
</body>
</html>

2、使用animate.css库
首先进入到Animate.css官网：
在这里插入图片描述
下载animate.css文件，然后引入：

<head>
  <meta charset="UTF-8">
  <title>在vue中使用Animate.css库</title>
  <link rel="stylesheet" href="./animate.css">   <!--引入样式文件-->
  <script src="../node_modules/vue/dist/vue.js"></script>
</head>

使用animate特效，就可以去掉@keyframes效果了，因为animate.css这个库提供的就是@keyframes的动画效果：

<div id="root">
  <transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">change</button>
</div>

vue中使用animate.css库

猜你喜欢