Animate.css

最新推荐文章于 2024-07-15 16:28:45 发布

Hvemi-l

最新推荐文章于 2024-07-15 16:28:45 发布

阅读量216

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_57662065/article/details/124673077

版权

安装和使用

安装

npm install 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_)。如下：

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

持续时间和延迟时间

  animation-duration: 1.8s; //动画持续时间完成
  animation-delay: 2s;  //动画延迟多久才开始

推荐

vue-collapse-transition

安装

使用 NPM：

npm i @ivanv/vue-collapse-transition

通过 CDN：

<script src="https://unpkg.com/@ivanv/vue-collapse-transition"></script>

用法

包装要使用标记使其可折叠的容器。<collapse-transition>

切换布尔值时，将自动触发转换。v-show

<template>
  <div>
    <button @click="isOpen = !isOpen">
      Toggle
    </button>
    
    <collapse-transition>
      <div v-show="isOpen">
        This div will open and close smoothly!
      </div>
    </collapse-transition>
  </div>
</template>

<script>
  import { CollapseTransition } from "@ivanv/vue-collapse-transition"
  
  export default {
    components: {
      CollapseTransition,
    },
    data() {
      return {
        isOpen: false, // closed by default
      }
    }
  }
</script>

Hvemi-l

关注

0
点赞
踩
0

收藏

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

安装和使用安装npm install 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>基本用法
复制链接

扫一扫