Vue中使用animate.css库

2022-03-17 03:59:03

先来看一个例子，要实现的效果是文字弹跳放大在缩小显现和隐藏：

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

代码解析：①使用@keyframes定义一个keyframes CSS3动画,以百分比来规定改变发生的时间,0% 是动画的开始时间，100% 动画的结束时间。

　　　　　②在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。transform: scale(1.5)表示缩放倍数为1.5倍。

③在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

使用CSS3可以完成一些简单的动画效果，但是每次都需要自己手写既麻烦又伤脑，而引入animate.css库之后就不需要自己写动画的样式或者效果。

Animate.css是一个基于css3 animation动画库，库中预设了几乎所有日常开发中的需求

在使用animate.css库之前，我们可以通过以下 attribute 来自定义过渡类名：

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

例如上述代码可以使用自定义过渡类名:

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

Animate.css的简单使用：

1.首先要在官网下载animate.css 的文件：链接地址(https://daneden.github.io/animate.css)，然后将该文件通过link方式引入到html或者vue页面

2.在transition标签中自定义过渡类名，新定义的类名要包含 animated 动画名

<!-- 光加animated是没用的，加了animated只是告诉使用animate库里的动画效果 -->
        <transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
            <div v-show="show">Hello World</div>
        </transition>
        <button @click="handleClick">toggle</button>

注意：在3.x版本时，基本类都是加animated ，在4.x版本加 animate__animated，就是要加 animate__ 前缀。

Vue中使用animate.css库

码农公寓

相关文章