vue中使用animate 的小插曲

最新推荐文章于 2024-08-07 15:34:36 发布
最新推荐文章于 2024-08-07 15:34:36 发布
阅读量185 收藏
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40637683/article/details/107491321
版权

前言：你猜我弄不弄你就完了

使用animate的小坑

已经很久没有用过这个小的动画库了，突然上vue中使用，搞的有点措手不及。

今天项目中用到了animate.css ,使用中遇到了一个小坑，百度搜到的都是

  1. 安装
npm install animate.css --save

或者

yarn add animate.css

然后呢

// mine.js 中
import animated from 'animate.css'

Vue.use(animated)

其他的引入方式

import 'animate.css'

再然后呢,用就完了呗

<div class="ty">
    <!-- 直接使用animated中的动画class名，注意：必须使用animated这个class名，否则动画会无效 -->
	<div class="box animated bounceInDown"></div>
</div>

就这个套路，差点把我玩死，真的是鸟用没有，后来好不容易找到animate.css官网，发现(zi ti xiao le pa ni men kan bu dao)

  1. 安装没问题

这样

npm install animate.css --save

这样

yarn add animate.css

或者这样

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
  />
</head>
  1. 使用呢，你们猜
/*
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 
 *            佛祖保佑       永不宕机     永无BUG
 */

直接用,但需要把前缀加上，animate__,引入还是不能少的上边的引入方式都可以的，但必须要有animate__animated。这个不能少！
注意的是：animate后边是两个下划线，千万不要搞错噢

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

看完官方文档后才知道是，animate更新了，更新后用法有点不同，贴个传送们去官方看文档吧！

话不多说，屁不多放，就这样结束了。

trry-
关注
vue3中使用animate.css插件css动画 实现弹性和晃动效果的入场动画
快来一起学习前端知识把！加油，前端人
07-01 432
animate__animated是animate.css库提供的基础动画类，确保动画效果能够应用到元素上。是被组件包裹的元素，它将应用animate__animated shine类提供的样式，并在进入页面时按照animate__backInDown animate__wobble类定义的动画效果进行展示。enter-active-class="animate__backInDown animate__wobble"属性定义了元素进入（显示）时的动画类。元素的进入效果提供一个动画。这两个类的组合可以为。
初识Animate.css
weixin_55747430的博客
05-10 4176
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。一、安装使用安装二、基本用法1.使用方式三、keyframes关键帧 前言 Animate.css是一个现成的跨浏览器动画库，可用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示。 官方学习文档网址 一、安装使用 安装 使用 npm 安装： $ npm install animate.css -.
如何使用animate.css动画库
qczzc的博客
05-21 6072
随着前端界面需求以及内容友好度的提高，一个好看的动画往往显得非常重要，接下来我们就来介绍一下如何在HTML以及工程项目中使用animate.css动画库是一个前端的动画库，animate.css官网用npm安装 在js代码中引入即可(这里我推荐在main.js中引入，这样就可以在整个工程文件中使用啦) 1.2、在html文件引入 在head中 2.使用方法 在 transition 标签中给对应动作的类名加上动画库中的类就行啦。 代码如下（示例）：
使用Animate.css插件快速实现css动画，超简单教程
最新发布
weixin_43472754的博客
08-07 350
（1）首先去官网选择喜欢的动画并复制，此时复制的是动画类名。2.安装Animate.css插件。3.在main.js文件中引入插件。
Animate.css的详解
qq_37647812的博客
02-24 6779
Animate.css是一款简单高效的css库，里面封装了若干种简单的常见动画，适合快速使用，同时也方便进行按需修改。 1、导入文件 <head> <link rel="stylesheet" href="animate.min.css"> </head> 2、给指定元素加上指定的动画样式 <div class="animated bounce"></div> animated，每一个应用animate.css效果的元素都必须添加这
经典动画库 animate.css 的应用
九天翔龙的技术博客
11-15 8580
Animate.css 就像嗑水那么简单的CSS动画。其核心技术使用了 CSS3 里的@keyframes和animation。各大浏览器只要不是太旧的版本都能兼容。
Animate.css介绍及使用教程
热门推荐
Andrelia的博客
07-13 1万+
前面的话 animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。本文将详细介绍animate.css的使用 引入 　　animate.css的最新版本是3.5.2，引入animate.css很容易，有以下几种方法 1、从官网下载 https://raw.github.com/daneden/animate.css/mas...
animate.css在vue项目中的使用教程
12-09
在 Vue 项目中使用 Animate.css 可以快速地为你的应用增添丰富的动画效果。只需简单地安装、引入并正确使用类名，就能轻松实现各种预设的 CSS 动画。同时，你可以结合 Vue 的过渡系统，以实现更精细的动画控制。通过...
Vue2使用animate.css
Lucky1019的博客
05-11 958
安装 npm安装包依赖 npm install --save vue2-animate 在main.js中引用 import 'animate.css' 正式使用 1、在过度元素上使用对应的name属性 <transition-group name="fadeLeft" tag="ul"> <li v-for="item in items" v-bind:key="item"> {{ item }} </li> <
vue2.0 和 animate.css的结合使用
11-29
下面的代码展示了如何在 Vue 中使用 `transition` 和 `transition-group` 结合 animate.css 实现过渡效果： ```html <button @click="toggleShow">Toggle Transition <p v-show="show">Transition Element...
vue过渡和animate.css结合使用详解
08-30
在 Vue 中，我们可以使用 Animate.css 来实现过渡动画。AniMate.css 提供了多种预定义的动画效果，我们可以根据需要选择不同类型的动画效果。 在上面的示例代码中，我们使用了 `zoomInLeft` 和 `zoomOutRight` 两个...
【css】使用Animate.css
weixin_46590928的博客
11-19 2588
自定义预设动画类的属性。}通过js代码修改css变量 // All animations will take twice the time to accomplish document . documentElement . style . setProperty('--animate-duration' , '2s');
Animate.css动画库，简单的使用，以及源码剖析
Unknowncheats的博客
08-01 1185
项目演练地址推荐的在线文档社区-MDNcss在线手册包含css3 animate.css是什么？能做些什么？ animate.css是一个css动画库，使用它可以很方便的快捷的实现，我们想要的动画效果，而省去了操作js的麻烦。同时呢，它也是一个开源的库，在GitHub的点赞高达5万以上。功能非常强大。性能也足够出色。 如何使用它？ 首先你需要到github上下载它，地址 拿到它之后，把animate.css引入到你的html文件。 参考官方的文档（当然了，是英文的哈哈哈，程序员不会英语可万...
动画插件--AnimateCSS
小白小白从不日别的博客
11-21 1530
1.什么是Animate.css? 其实swiper-animate就是参考Animate.css演变出来的一个插件, Animate.css和swiper-animate一样都是用于快速添加动画的, 所以会用swiper-animate就会用Animate.css 2.Animate.css的使用: 引入animate.css的文件 给需要执行动画的元素添加类名 3.示例 animated这个类名是animated.css的基类, 但凡需要通过animated.css来添加动画, 都需
Animate.css库用法（转载）
pigsohappy的博客
11-12 114
保存链接用 转载至 年少轻狂12138
使用Animate.css让你你的网页添加眼前一亮的动画
量子前端的博客
02-26 1556
默认情况下，动画只播放一次，持续1秒。/* 持续时间改为2秒 *//* 延迟1秒开始动画 *//* 设置无限次重复动画 */在HTML中，只需要给元素添加class.myElement。
css3 updown 动画,CSS3 Animation动画库animate.css的使用
weixin_42311022的博客
08-04 417
使用方法：1.引入css样式2.给要动画的元素加上class animated，如果想无限循环动画，可加上class infinite.(animated是每个要进行动画的元素都必须要添加的类)3.再给要执行动画的元素加上你需要的动画类class. 如下：bounceflashpulserubberBandshakeswingtadawobblebounceInbounceInDownbounc...
Animate.css的使用
zh15930366635的博客
05-09 3277
引入 方法一： 从官网下载：　https://raw.github.com/daneden/animate.css/master/animate.css 方法二： 通过npm安装 npm install animate.css 方法三： 使用在线cdn https://unpkg.com/animate.css@3.5.2/animate.min.css 基础用法 安装 Animate.css 后，将类animate__animated与任何动画名称一起添加到元素（不要忘记anima
动画学习之Animate.css的使用与解析
极客神殿
11-04 671
近期生活比较单一。 const 提升自己 = true; while( 提升自己 ) { 写码 ... 看书 ... 思考 ... 睡觉 } 既单一也充实，单一使我平静，充实使我保持向上的感觉，希望自己真难做到“持续学习，保持思考，不断进步”。 最近看到腾讯IS...
vue3 使用animate
08-19
综上所述，使用animate.css库实现过渡动画效果的步骤包括安装库、引入库文件以及在Vue组件中使用`<transition>`或`<transition-group>`元素，并设置相应的动画类名。<span class="em">1</span><span class="em">2...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值