Vue中使用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);
      }
    }
    .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库

上一篇:web的知识点小结


下一篇:ctfshow-web9