vue添加animate.css动画

最新推荐文章于 2021-12-08 21:58:34 发布
最新推荐文章于 2021-12-08 21:58:34 发布
阅读量1.8k 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43829905/article/details/89888800
版权

vue添加animate.css动画

1、首先在vue的index.html引入在线cdn的animate.css文件（第一种）

animate.css

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

或自己下载后放到vue项目的静态文件夹中

辅助类

给你想添加动画效果的元素添加一个 animated 类（必需）。如果需要动画循环运动，你还需要给这个元素追加 infinite 类，又或者自己另外定义一个类似于 infinite 的类。

效果添加

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

示例

<h1 class="animated infinite bounce">Example</h1>  //animated 必须的  infinite 循环  bounce动画效果

jQuery 基本用法

1.$('#yourElement').addClass('animated bounceOutLeft');

2.vue（第二种）

第一步：安装：

在命令行中执行：npm install animate.css --save

第二步：引入及使用：

main.js中：
 
import animated from 'animate.css' // npm install animate.css --save安装，在引入
 
Vue.use(animated)

使用


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

Vue过渡官网

LHC087
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中使用 Lottie 动画
xiangzhihong8的专栏
07-14 840
Lottie是由Airbnb开源的面向Android、iOS、Web和Windows的动画库，开发者可以使用它在Web、iOS、Android等平台上实现高性能的体验丰富的矢量动画。在早期的前端开发中，Flash是网页动画之王，不过它的规范约束随意，造成很多时设计出来的产品都无法符合用户体验要求。随着Flash动画的消失，HTML网页开发的主流技术，成为前端开发的技术标准，不过在HTML网页上进行动画开发其成本也是相当高的。
vue-animation
Chad97的博客
02-02 1761
vue-animation 为什么要有动画 ？ 就是要有不解释 比较简单记录一下，方便找 1. 过渡类名动画 1. html结构 &lt;div id="app"&gt; &lt;input type="button" value="动起来" @click="myAnimate"&gt; &lt;!-- 使用 transition 将需要过渡的元素包裹起来 --&
VUE之动画与animate.css动画库
zuomengjia的博客
10-31 3129
前言 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js 过渡动画原理 在进入/离开的过渡中，会有 6 个...
vue引入animate使用
weixin_44940078的博客
07-10 805
暂时使用animate做侧边栏显示和隐藏 侧边栏的动画效果，找了element-ui内置有上下折叠，没找到左右运动。又尝试了transform:translate（），没有动画效果。 安装animate cnpm install --save vue2-animate main.js中引入 import 'vue2-animate/dist/vue2-animate.min.css' <transition enter-active-class="slideInLeft" leave-active
vue中使用动画animation.css
归期无期的博客
11-24 1381
vue中使用动画animation.css 1.npm install animate.css -save 2.在main.js文件中引入并使用 import animate from ‘animate.css’ Vue.use(animate) 3.选中元素直接使用 如：animation flip animation-duration 2s
在VUE中使用第三方animate.css
MyAzhe0ci3的博客
06-24 413
官方链接 https://github.com/daneden/animate.css 导入方式 <link href="css/animate.min.css" rel="stylesheet" /> 进入过渡生效时的状态 enter-active-class 离开过渡生效时的状态 leave-active-class 案例一： 使用vue过渡和animate.css完成一个div的从左至右的放大,以及从右到左的缩小 <!DOCTYPE html> <html lang="e
vue 1.0 结合animate.css定义动画效果
10-18
Vue 1.0 结合animate.css可以方便地创建复杂的CSS动画效果。通过定义Vue组件的`transition`属性，配合CSS样式和Vue的过渡系统，以及animate.css库提供的预设动画，开发者可以轻松实现组件的动态效果。需要注意的是，...
基于animate.css动画库的全屏滚动，适用于vue.js(移动端、pc)项目。.zip
10-22
Animate.css是一个强大的、预定义的CSS动画库，可以为网页添加各种炫酷的动画效果，而Vue.js则是一个流行的渐进式JavaScript框架，用于构建用户界面。现在，让我们深入探讨这些技术及其在全屏滚动场景中的应用。 ...
vue过渡和animate.css结合使用详解
12-09
而Animate.css是一个预设的CSS动画库，包含了各种各样的动画效果，如淡入淡出、滑动、旋转等，可以轻松地为项目添加视觉吸引力。 在Vue过渡和Animate.css结合使用时，主要涉及以下几个关键知识点： 1. **Vue的组件...
vue-animate-fullpage:基于animate.css动画库的全屏滚动，适用于vue.js(移动端、pc)项目
05-05
基于animate.css动画库的全屏滚动，适用于vue.js(移动端、pc)项目。 安装 npm install vue-animate-fullpage --save bug修复 1.1.1版本，修复由于后端生成跳转事件，类型不匹配，页面跳转后动画无效的bug 使用 main....
vue使用css库,vue中使用CSS animate.css动画库
weixin_39828715的博客
08-04 156
首先在main.js引入animat.cssimport'./assets/css/animate.min.css';然后在模板中直接使用即可：点我展示效果hellodaliycode.comwwwdaliycodecomwww.daliycode.comwww.daliycode.com...data(){return{show:true,step:1,};},methods:{te...
vue中安装及使用animate.css
weixin_42645716的博客
01-20 604
先上Animate官网地址：https://animate.style/ 一、安装：我用的yarn 安装 $ yarn add animate.css 安装成功截图 二、引用(修改main.js) import animated from 'animate.css' // npm install animate.css --save安装，再引入 Vue.use(animated) 三、应用 1.直接使用类名 <h1 class="animate__animated animate__boun
Vue中引入animate.css
weixin_45734902的博客
12-08 1051
首先 安装下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.min.css动画特效
草巾冒小子的博客
08-16 5678
vue 监听滚轮滚动事件
vue中使用animate css
尘生杜若
02-20 4129
vue2使用animate css 安装 安装的方式有很多种 1.在html文件中直接引用从github上下载的资源 &lt;link rel="stylesheet" href="vue2-animate.min.css"&gt; 2.如果使用webpack并且用对了css-loader可以使用npm 安装 npm安装包依赖 npm install --save vue2-animate 3...
vue2.x中使用animate.css
lynnpaul的博客
11-10 1525
最近在学习VUE+animate.css，入门遇到一些坑。先上几个链接： animate.css官网：https://animate.style/#migration； animate.css下载地址：https://github.com/asika32764/vue2-animate； vue环境下使用animate.css：https://www.npmjs.com/package/vue2-animate； 1.vue环境，安装animate.css模块： cnpm install vue
33.Vue-使用第三方animate.css类库实现动画
DevOps海洋的渔夫@专栏
04-26 966
概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js 上一篇说明了使用过渡类名来实现动...
VUE Animate Css动画库使用
阿威的博客
06-17 365
Animate Css动画库使用 1.使用CDN添加到您的网页中 <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/> 2样式用法 这个类 animate__animated必加、记住别忘了！加Animate前缀 animate__ <h1 class="animate__animated animate__fadeInDownBi
vuebase-5.过渡和动画
aohouju7093的博客
08-10 117
动画的方案： 1.在 CSS 过渡和动画中自动应用 class 2.可以配合使用第三方 CSS 动画库，如 Animate.css 3.在过渡钩子函数中使用 JavaScript 直接操作 DOM 4.可以配合使用第三方 JavaScript 动画库，如 Velocity.js ----------- 实现动画的元素必须脱离文档流 过渡的类名： 在进入/离开的过渡中，会有...
vue3 animate.css
最新发布
01-25
在Vue3中使用animate.css可以通过以下步骤实现： 1. 安装animate.css库： ```shell npm install animate.css ``` 2. 在需要使用动画的组件中引入animate.css： ```javascript import 'animate.css'; ``` 3. 在组件的样式中定义动画类名： ```css .router_animate-enter-active { animation: rollIn 1s; } .router_animate-leave-active { animation: rollOut 0.6s; } ``` 4. 在组件的模板中使用动画类名： ```html <transition name="router_animate"> <!-- 组件内容 --> </transition> ``` 这样，当组件进入或离开时，会应用相应的动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值