初识Animate.css

前端萌新

已于 2022-05-10 21:36:14 修改

阅读量3.9k

点赞数 1

文章标签： css javascript 前端

于 2022-05-10 21:34:39 首次发布

本文链接：https://blog.csdn.net/weixin_55747430/article/details/124697702

版权

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

文章目录

前言
- Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。
一、安装使用
- 安装
二、基本用法
1.使用方式
三、keyframes关键帧
四、transition组件

前言

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.使用方式

在标签上加上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>

前端萌新

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
初识Animate.css

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。一、安装使用安装二、基本用法1.使用方式三、keyframes关键帧前言Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。官方学习文档网址一、安装使用安装使用 npm 安装：$ npm install animate.css -.
复制链接

扫一扫