Vue3: 安装使用animate.css

原创已于 2023-06-19 22:39:35 修改 · 853 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2022-12-12 00:36:41 首次发布

vue3学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何通过 CDN 或 npm 引用 Animate.css 库，并展示了如何在 HTML 页面中应用 Animate.css 的动画效果。包括添加必要的 CSS 类来实现特定的动画，例如 bounceIn 效果。

一、使用方式

1.1 cdn引用

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" />

1.2 npm 安装依赖

npm i animate.css --save

二、页面使用

2.1 语法规则

注意一定要添加前缀: animate__animated animate__bounceIn

  <div class="copy animate__animated animate__bounceIn" @click="copyAction">
      <icon-copy />
      复制
    </div>

2.2 动画参考

在这里插入图片描述

动画参考

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

西魏陶渊明

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue3中使用animate.css插件css动画实现弹性和晃动效果的入场动画

快来一起学习前端知识把！加油，前端人

07-01

1236

animate__animated是animate.css库提供的基础动画类，确保动画效果能够应用到元素上。是被组件包裹的元素，它将应用animate__animated shine类提供的样式，并在进入页面时按照animate__backInDown animate__wobble类定义的动画效果进行展示。enter-active-class="animate__backInDown animate__wobble"属性定义了元素进入（显示）时的动画类。元素的进入效果提供一个动画。这两个类的组合可以为。

前台-vue3使用animate.css

hktkkkk的博客

07-06

265

【代码】前台-vue3使用animate.css。

1 条评论您还未登录，请先登录后发表或查看评论

前端之vue3使用动画库animate.css(含动画、过渡)

weixin_46372074的博客

05-12

7525

动画效果1.默认动画默认动画实例默认动画语法2.指定name动画 1.默认动画默认动画实例 <template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition> <h2 v-show="isShow">动画效果</h2> </transition> </div> </template&g

vue3中使用animate.css

四岁爱上了她的博客

04-28

1312

main.js注册：import ‘animate.css/animate.min.css’注意：animate__animated 这个类名是固定的，然后后面再跟上一个动画的类名。注意：import ‘animate.css’ 不适合在vue3项目。引入：npm install animate.css --save。使用：class=“animate__animated 动画名称”

vue2-animate：Animate.css的Vue.js 2.0端口。用于Vue的内置过渡

02-06

Vue.js 2和3的vue2-animate 跨浏览器CSS3动画库一个的端口。与Vue的内置转换一起使用。 | 信用是原始作者（仅适用于Vue 1.x）。是SCSS版本的作者。我只是项目维护者，如有任何更改或要求，请打开请求请求...

基于animate.css动画库的全屏滚动，适用于vue.js(移动端、pc)项目。.zip

10-22

3. 应用动画类：在Vue组件的模板中，根据需求为特定元素添加Animate.css的动画类。例如，可以使用`v-bind:class`指令动态地根据滚动状态添加或移除动画类。 4. 监听滚动事件：使用Vue的生命周期钩子函数（如`mounted...

vue过渡和animate.css结合使用详解

12-09

在Vue过渡和Animate.css结合使用时，主要涉及以下几个关键知识点： 1. **Vue的组件**： - `<transition>`组件是Vue中的一个特殊组件，用于包裹需要过渡的元素或组件。当这个组件的`v-if`或`v-show`状态改变时，Vue...

vue3项目引入animate.css教程

Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~

12-02

4519

vue3使用animate.css教程

vue3如何简单快速使用Animate.css

Annaseet的博客

07-02

722

在做项目时，想要追求更美观和用户的交互，需要用到动画。由于我建立的是vue3的项目在引用的时候一直出错。注意：这里不是导入的import ‘animate.css’ 因为已经不适合在vue3项目。注意：animate__animated 这个类名是固定的，然后后面再跟上一个动画的类名。1.第一步：你需要先安装animate.css，在本项目终端运行。2.第二步需要你在main.ts里面进行引用，如果是js的话一样。3.在animate.css’官网找到你想要的动画效果。4.直接设置class值。

vue中使用animate.css

u013141712的专栏

06-14

720

animated css 引入使用

vue3使用animate.css

qq_48321582的博客

03-17

572

动画效果是在进入页面的时候立刻生效，怎么可以实现点击的时候生效呢？

Animate.css的安装与使用

mfxcyh的博客

08-19

1202

当滚动条滚动到大于该位置时，触发该动画。为防止滚动到大于该位置后动画重复展示，所以还要设置一个变量值为true，当滚动到大于该位置时，判断该变量的值为true时开始动画，然后设置该变量值为false，再向下滚动时，由于该变量的值为false，所以不能展示动画，避免了重复展示。当向上滚动到小于该位置时，设置该变量值为true，当第二次滚动到该位置下时，仍然能展示动画，同时，要设置该需要动画效果的模块不显示。

在vue3引用Animate.css（一个CSS3 动画库）教程