当前位置: 首页 > 工具软件 > Animate.css > 使用案例 >

初识Animate.css

刁丰羽
2023-12-01

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

Animate.css是一个现成的跨浏览器动画库,可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。

官方学习文档网址

一、安装使用

安装

使用 npm 安装:

$ npm install animate.css --save

或者使用 Yarn 安装(这只适用于 Webpack、Parcel 等适当的工具。如果您不使用任何工具来打包或捆绑您的代码,您可以简单地使用下面的 CDN 方法):

$ yarn add animate.css

将其导入您的文件:

import 'animate.css';

或者使用 CDN 将其直接添加到您的网页:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

二、基本用法

安装 Animate.css 后,将类animate__animated与任何动画名称一起添加到元素(不要忘记animate__前缀!):

<h1 class="animate__animated animate__bounce">An animated element</h1>

使用@keyframes
尽管该库为您提供了一些帮助类,例如animated让您快速运行的类,但您可以直接使用提供的动画keyframes。这提供了一种灵活的方式来将 Animate.css 用于您当前的项目,而无需重构您的 HTML 代码。

例子:

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

CSS 自定义属性(CSS 变量)
从版本 4 开始,Animate.css 使用自定义属性(也称为 CSS 变量)来定义动画的持续时间、延迟和迭代。这使得 Animate.css 非常灵活和可定制。需要更改动画持续时间?只需在全局或本地设置一个新值。

例子:

/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

自定义属性还可以轻松地动态更改所有动画的时间受限属性。这意味着您可以使用 javascript one-liner 获得慢动作或延时效果:

// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');

1.使用方式

  1. 在标签上加上animated 及 动画名称:
    代码如下(示例):
<transition name="fade"
                    enter-active-class="animated swing "
                    leave-active-class="animated shake "
        >
            <div v-if="show">hello world</div>
</transition>

注:animated 类似于全局变量,它定义了动画的持续时间,默认1s;swing是动画具体的动画效果的名称,你可以选择任意的效果。

2.同时使用过渡和动画
代码如下(示例):

<transition name="fade"
                    type="transition"
                    :duration="{enter:5000,leave:10000}"
//enter和leave分别为入场动画和出场动画的时间
                    appear
                    enter-active-class="animated swing fade-enter-active"
                    leave-active-class="animated shake fade-leave-active"
                    appear-active-class="animated swing"
        >
<!--          type="transition" 设置动画是以transition时间为标准结束还是animate时间为标准结束,animate默认时长是1s-->
<!--          appear-active-class 在页面刷新的时候展示动画效果与appear同时使用-->
<!--         :duration="5000" 自定义动画时长 在此结束后才移除class-->
            <div v-if="show">hello world</div>
</transition>
<style scoped>
 .fade-enter,.fade-leave-to {
        opacity: 0;
    }
    .fade-enter-active {
        transform-origin: left center;
        transition: opacity 1s;
    }
    .fade-leave-active {
        transform-origin: left center;
        transition: opacity 1s;
    }
</style>

三、keyframes关键帧

<template>
    <div>
      <transition name="fade">
        <div v-if="show">hello world</div>
      </transition>
      <button @click="change">切换</button>
    </div>
</template>
 
<script>
export default {
  name: 'keyframes',
  data () {
    return {
      show: true
    }
  },
  methods: {
    change () {
      this.show = !this.show
    }
  }
}
</script>
 
<style scoped>
  @keyframes bounce-in {
    0% {
      transform: scale(0);
   }
    50% {
      transform: scale(1.5);
   }
    100% {
      transform: scale(1);
   }
  }
//会自动在页面中name为fade的标签上插入这个样式,或者直接在标签上写enter-active-class和leave-active-class,将写好的css样式名字赋上即可
  .fade-enter-active{
    transform-origin: left center;
    animation: bounce-in 1s;
  }
  .fade-leave-active{
    transform-origin: left center;
    animation: bounce-in 1s reverse;
  }
</style>

四、transition组件

当元素被transition标签包裹之后,vue会自动分析被包裹的元素的css样式,然后构建一个动画的流程。

在动画开始执行的瞬间会往div标签上增加两个样式:fade-enter、fade-enter-active,当动画第一帧结束开始第二帧的时候,会移除fade-enter样式,同时加上fade-enter-to样式。在动画执行的最后会将fade-enter-active和fade-enter-to都移除。

<template>
  <div>
    <transition name="fade">
      <div v-if="show">hello world</div>
    </transition>
    <button @click="change">切换</button>
  </div>
</template>
 
<script scoped>
export default {
  name: 'BaseAnimate',
  data () {
    return {
      show: true
    }
  },
  methods: {
    change () {
      this.show = !this.show
    }
  }
}
</script>
 
<style scoped>
  .fade-enter,.fade-leave-to{
    opacity: 0;
  }
  .fade-enter-active,.fade-leave-active{
    transition: opacity 1s;
  }
</style>

 类似资料: