在Vue中使用Animate.css库

最新推荐文章于 2022-10-18 12:58:42 发布
最新推荐文章于 2022-10-18 12:58:42 发布
阅读量238 收藏
点赞数
分类专栏： Vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/t595981879/article/details/100130587
版权
Vue 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
前端
19 篇文章 0 订阅
订阅专栏

地址：https://daneden.github.io/animate.css/

下载：

npm install animate.css --save

在入口文件引用

import animate from 'animate.css'

Attention Seekers 注意力寻求者（9个）

样式简介
bounce弹跳
flash闪
pulse脉冲
rubberBand橡皮筋
shake摇
swing摇摆
tada波幅
wobble摇晃
jello果冻

Bouncing Entrances 弹跳进入（5个）

样式简介
bounceIn向里，弹跳
bounceInDown向里，向下,弹跳
bounceInLeft向里，向左,弹跳
bounceInRight向里，向右,弹跳
bounceInUp向里，向上，弹跳

Bouncing Exits 弹跳出口（5个）

样式简介
bounceOut向外，弹跳
bounceOutDown向外，向下，弹跳
bounceOutLeft向里，向左，弹跳
bounceOutRight向外，向右，弹跳
bounceOutUp向外，各上，弹跳

Fading Entrances 平淡进入（9个）

样式简介
fadeIn向里
fadeInDown向里，向下，变大
fadeInDownBig向里，向左，弹跳
fadeInLeft向里，向左
fadeInLeftBig向里，向左，变大
fadeInRight向里，向右
fadeInRightBig向里，向右，变大
fadeInUp向里，向上
fadeInUpBig向里，向上，变大

Fading Exits 平淡退场（9个）

样式简介
fadeOut向外
fadeOutDown向外，向下
fadeOutDownBig向外，向下，变大
fadeOutLeft向外，向左
fadeOutLeftBig向外，向左，变大
fadeOutRight向外，向右
fadeOutRightBig向外，向右，变大
fadeOutUp向外，向上
fadeOutUpBig向外，向上，变大

Flippers 翻动 （5个）

样式简介
flip翻翻动转
flipInX向里，上下，翻动
flipInY向里，左右，翻动
flipOutX向外，上下，翻动
flipOutY向外，左右，翻动

Lightspeed 缓缓移动 （2个）

样式简介
lightSpeedIn缓缓移入
lightSpeedOut缓缓移出

Rotating Entrances 翻转入口 （5个）

样式简介
rotateIn向里，翻转
rotateInDownLeft向里，向下，向左，翻转
rotateInDownRight向里，向下，向右，翻转
rotateInUpLeft向里，向上，向左，翻转
rotateInUpRight向里，向上，向右，翻转

Rotating Exits 翻转退场 （5个）

样式简介
rotateOut向外，翻转
rotateOutDownLeft向外，向下，向右，翻转
rotateOutDownRight向外，向下，向右，翻转
rotateOutUpLeft向外，向上，向左，翻转
rotateOutUpRight向外，向上，向右，翻转

Specials （3个）

样式简介
hinge合页
rollIn向里滚动
rollOut向外滚动

Zoom Entrances 缩放进入 （5个）

样式简介
zoomIn向里，放大
zoomInDown向里，向下，放大
zoomInLeft向里，向左，放大
zoomInRight向外，向右，放大
zoomInUp向里，向上，放大

Zoom Exits 缩放退场 （5个）

样式简介
zoomOut向外，放大
zoomOutDown向外，向下，放大
zoomOutLeft向外，向左，放大
zoomOutRight向外，向右，放大
zoomOutUp向外，向上，放大

Sliding Entrances 滑动进入 （4个）

样式简介
slideInUp向里，向上，滑动
slideInDown向里，向下，滑动
slideInLeft向里，向左，滑动
slideInRight向里，向右，滑动

Sliding Exits 滑动退场 （4个）\

样式简介
slideOutUp向外，向上，滑动
slideOutDown向外，向下，滑动
slideOutLeft向外，向上，滑动
slideOutRight向外，向右，滑动


 

流浪的的鱼
关注
专栏目录
Vue中的使用animate.css库
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
04-04 244
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue中的使用animate.css库</title> <script src="./vue.js"></script> <style> @keyf...
vue项目中使用Animate.css动画库，解决在vue项目中使用Animate.css动画库没有效果问题
圆圆的 JavaScript 博客
02-25 2361
在vue项目中引用Animate.css动画库，手把手教你解决在vue项目中没有效果的问题
Vue中CSS动画原理
qq_37117521的博客
10-15 271
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <script src="./vue.js"></script> <style> .fade-enter, ....
vue 中 使用Animate.css 库
weixin_46031116的博客
05-09 283
Animate.css 库 官网 https://animate.style/ 1.安装 npm install animate.css --save 或者 yarn add animate.css 2.引入到main.js import animated from 'animate.css' Vue.use(animated) 3.在需要的页面中使用 <div class=" goodlist animate__animated animate__backInLeft " > &l
Vue中的使用Animate.css库
Smart_J_King的博客
09-18 323
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue中的使用Animate.css库</title> <script src="./vue.js"&gt.
vue过渡和animate.css结合使用详解
12-09
在Vue过渡和Animate.css结合使用时，主要涉及以下几个关键知识点： 1. **Vue的组件**： - `<transition>`组件是Vue中的一个特殊组件，用于包裹需要过渡的元素或组件。当这个组件的`v-if`或`v-show`状态改变时，Vue...
vue 1.0 结合animate.css定义动画效果
10-18
在Vue 1.0中，实现自定义动画效果可以借助CSS3动画库，如animate.css。animate.css提供了丰富的预定义动画效果，可以帮助开发者快速创建出各种动态效果。下面将详细介绍如何在Vue 1.0项目中结合animate.css来定义...
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库
ybb520chongren_的博客
02-15 1460
animate.css是一种动画效果的css库,在vue中可以直接通过引用该库可以达到自己想要的动画效果，下面一起来看下vue是如何引用animate.css库的   1.第一步： 在浏览器中搜索animate.css官网，如图所示   2.第二步： 点击Down Animate.css下载，，下载成功后引入vue中   3.第三步 将animate.css复制进来，然后...
vue中使用animate.css动画库
sumimg的博客
01-10 533
1.安装： npm install animate.css --save 2.引入及使用： //main.js中 import animated from 'animate.css' Vue.use(animated) 3.在vue文件中使用： <div class="ty"> <!-- 直接使用animated中的动画class名，注意：必须使用animated这个class名，否则动画会无效 --> <div class="box animated
Vue_使用animate.css库
大脸猫~
06-30 2103
一.@keyframs 动画 我们如何在Vue中使用@keyframs 动画？ &amp;lt;transition name='fa'&amp;gt; &amp;lt;div v-if=&quot;cssanimate&quot;&amp;gt;hello css animate1&amp;lt;/div&amp;gt; &amp;lt;/transition&amp;gt; &amp;lt;but
css动画效果
DanielLeefu的博客
08-15 309
css的动画效果库 @charset "UTF-8"; /*! * animate.css -https://daneden.github.io/animate.css/ * Version - 3.7.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 20...
vue 使用animate.css动画库
PrimaryColor
08-03 521
vue和最新版的animate动画库不兼容，所以不能安装最新版的animate动画库。 一、引入： 在public文件夹中的index.html加入以下代码： <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> 二、使用： 在需要设置的地方添加类样式，默认类样式“animated”必须添加： 三、示例： <input type="button" valu
在vue中使用Animate.css
Mjxiaomihu的博客
09-06 920
在vue中使用Animate.css
Vue中引入animate.css
weixin_45734902的博客
12-08 1110
首先 安装下animate.css npm install animate.css --save 然后在vue文件的script中引入： import $ from '../assets/js/jquery.js';//非必要 import animate from 'animate.css' 代码例子： <template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <t
vue项目中引入animate.css和wow.js
weixin_30657541的博客
08-19 530
本文转自：https://blog.csdn.net/liyunkun888/article/details/85003152 https://www.zhuimengzhu.com/content/article/id/87.html 一、场景在很多的网站中，我们发现在滚动条滑动的时候一些元素显示出来的时候是有一些动画效果的，这样看起来页面更具有活力，...
Vue引用第三方动画库animate.css
weixin_54551007的博客
10-18 448
Vue引用第三方动画库animate.css
vue中结合animate.css实现元素动画入场
热门推荐
luck_lin
08-09 1万+
话不多说先看下demo的GIF： 1.首先引入animate.css，可以直接在index.html中cdn引入； 2.其次在开发这种动画较多的页面我觉得还是引用jquery比较方便，操作dom稍多， 我这里没有使用jquery，就想复习复习原生js。可以npm安装，在build/webpack.base.conf.js中定义插件： var webpack = require('...
vue2使用animate.css
最新发布
10-02
1. 在终端中使用npm命令安装animate.css库: ``` npm install animate.css --save ``` 2. 在你的main.js文件中引入animate.css: ```javascript import 'animate.css'; ``` 3. 在组件中使用animate.css的类来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值