Vue2.0整合Animate

最新推荐文章于 2026-06-17 05:05:11 发布
原创 最新推荐文章于 2026-06-17 05:05:11 发布 · 444 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue.js
本文详细介绍两种在Vue项目中成功导入和使用动画效果的方法。第一种是通过npm安装vue2-animate并直接在main.js中导入。第二种是在index.html的head部分直接链接animate.css库。文章提供了具体代码示例和动画类型，如Bounce、Fade、Rotate等。

说明：网上很多导入使用很多都用不了，不知道是因为版本问题还是什么

本人测试可以使用的两种方式

第一种：

安装

npm install vue2-animate -S

在main.js中可直接使用

import 'vue2-animate/dist/vue2-animate.min.css'

样式参考如下

Bounce

bounce
bounceDown
bounceLeft
bounceRight
bounceUp


Fade

fade
fadeDown
fadeDownBig
fadeLeft
fadeLeftBig
fadeRight
fadeRightBig
fadeUp
fadeUpBig


Rotate

rotate
rotateDownLeft
rotateDownRight
rotateUpLeft
rotateUpRight


Slide

slideDown
slideLeft
slideRight
slideUp


Zoom

zoom
zoomDown
zoomLeft
zoomRight
zoomUp

第二种：

直接vue的根目录中找到index.html

在head中引入

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

这个我试过用本地的，但是怎么弄都不生效

vue2-animate：Animate.css的Vue.js 2.0端口。 用于Vue的内置过渡
02-06
Vue.js 2和3的vue2-animate 跨浏览器CSS3动画库 一个的端口 。 与Vue的内置转换一起使用。 | 信用 是原始作者（仅适用于Vue 1.x）。 是SCSS版本的作者。 我只是项目维护者，如有任何更改或要求，请打开请求请求。 表中的内容 安装 HTML 包括样式表： < head > < link rel =" stylesheet " href =" vue2-animate.min.css " > </ head > 包含在CDN中： < link rel =" stylesheet " href =" https://unpkg.com/vue2-a
vue2中使用Animate.css动画插件
qq_60654563的博客
06-09 3368
vue2中使用Animate.css动画插件
Animate.css在vue中的使用及路由过渡效果
Noctis99的博客
08-06 489
css
Vue2：简单使用Animate.css动画效果
欢迎来到长风沛雨的博客
07-13 2761
简单的使用一下Animate的动画效果（安装，使用，速度）
Vue2 - 使用第三方动画样式，实现过度动画
weixin_41606115的博客
02-15 501
enter-active-class设置入场的效果，使用leave-active-class设置离场的效果。备注：若有多个元素需要过度，则需要使用：，且每个元素都要指定key值。使用enter-active-class和leave-active-class应用css动画。v-enter-active：进入过程中。v-leave-active：离开过程中。v-enter-to：进入的终点。v-leave-to：离开的终点。v-enter：进入的起点。
animate.css的使用
div_ma的博客
07-27 783
在用link或者是import引入animate.cssanimate.css在vue2.0布局中的结构<transition enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutLeft"> <p v-show="show">前端工程师：webmxj (个人网站)</p> </t
vue 结合 animate.css
u011927449的博客
04-08 228
这里说的是vue2.0和animate.css的结合使用。其实用过就知道用法是比较简单的。但是就是刚开始使用的时候，难免有的会遇到各种问题。简单的说说我所用过并且遇过的坑。 首先是transition组件，在2.0中由transition属性变成了一个独立的组件。 用法： 1、 要用animate.css，那么首先需要做的就是导入它。局部的导入的话，就在当前...
玩玩Animate.style
leesor的博客
05-14 1845
然后，图片应该成对出现，所以得先创建图片类型数组，然后复制并打乱顺序。最后，整合所有部分，确保代码在一个HTML文件中，正确引入Vue和Animate.css，样式和脚本部分无误。检查是否有语法错误，比如标签闭合、属性绑定是否正确，比如@click应该用方法，:class绑定animate类。利用vue.js和animate.style网站css动画效果，做一个连连看的游戏，要10乘以10的图片矩阵。2、两张不同的图，不消失，用{animate__animated animate__jello}抖动图片。
animate.css源码
博哥的二进制世界
07-22 913
animate.css源码 animate.css源码，关于如何使用animate.css，可参考vue+ts或者react+ts如何使用animate.css。 /*! 动画属性： animation-name:动画名称 animation-duration:动画时间 animation-timing-function:动画的速度曲线 animation-delay:动画延迟 animation-iteration-count:动画播放次数 animation-direction:是否轮流反
【Vue框架】Vue2中动画效果详解—单组动画、多组动画、使用animate动画库、transition-group 列表动画(附源码)
量化Mike
03-30 1748
动画过渡效果：https://cn.vuejs.org/v2/guide/transitions.html 2、Vue定义多组动画 3、使用animate动画库 动画样式库
Vue C3动画 vue2-animate
程先生的博客
06-02 541
　　最近写vue的项目，需要添加一个动画，首先想到的就是jQuery中常用的第三方库，animate，但是这个不是能完全兼容的，需要自己做处理。然后就在晚上寻找Vue版本的动画库，然后就找到了这个vue2-animate。网上的教程还是不少的，然后demo能直接运行，但是他们有一点没有写的很明白，就是在添加enter-active-class或leave-active-class属性的时候。官方...
在vue2中使用动画库
qq_55685361的博客
05-09 1518
一、在vue2中使用 animate.cs 1.1 安装 详情参考：使用文档 使用npm进行安装 npm install animate.css --save 在vue-cli创建的main.js中导入 import 'animate.css'; 1.2 使用 1.2.1 设置class类使用动画效果 将 animate__animate 类以及任何动画名添加到元素中，即可使用动画效果 <h1 class="animate__animated animate__bounce">An anim
vue集成vue2-animate插件实现常用动画
诗雨远方的博客
05-21 1万+
vue2集成vue2-animate插件实现常用动画 vue的一些常用动画animate css来实现，针对vue2出现了一款插件vue2-animate,其实更权威的介绍在这里欢迎访问https://www.npmjs.com/package/vue2-animate，看一下如何使用呢？ 一、安装 npmin...
[vue] transition animate.js
qq_14993591的博客
06-19 827
animate
vue2使用animate css
热门推荐
永远加班的小岚
04-28 3万+
vue2使用animate css先上几个链接 vue插件大集合：awesome-vue vue2插件： vue2-animate：vue2-animate vue2插件vue2-animateDEMO： vue2-animatedemo：vue2-animate-demo 我想用过animatecss的都知道这是一个极其简单而又酷炫的css动画库，但是我想在vue2中使用anima
【亲测免费】 Animated Vue：为Vue 2应用注入生动动画效果
gitblog_00453的博客
09-15 1189
Animated Vue：为Vue 2应用注入生动动画效果 项目介绍 Animated Vue 是一个专为Vue 2设计的插件，它能够将 Animate.css 的动画效果无缝集成到Vue组件中。通过这个插件，开发者可以轻松地在Vue应用中使用各种动画效果，而无需编写复杂的CSS或JavaScript代码。无论是单个组件的动画效果，还是列表元素的动画效果，Animated Vue都能提供简单易用的...
探索Vue-Animate：为你的Vue.js项目增添动感
gitblog_00998的博客
08-24 922
探索Vue-Animate：为你的Vue.js项目增添动感 在现代Web开发中，动画效果已成为提升用户体验不可或缺的一部分。今天，我们将深入探讨一个强大的开源项目——Vue-Animate，这是一个专为Vue.js设计的跨浏览器CSS3动画库，它能够让你的网页元素动起来，为用户带来更加生动和吸引人的视觉体验。 项目介绍 Vue-Animate是基于著名的CSS动画库Animate.css开发的Vu...
Vue2使用animate.css
Lucky1019的博客
05-11 1129
安装 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> <
web应用技术作业06
最新发布
2403_89185994的博客
06-17 102
把员工信息列表展示的页面的表格样式，从“带斑马纹表格”，改成“基础表格”样式，并且只占窗口的60%在pom.xml文件中引入dom4j的依赖用于解析XML文件emp.xml。stripe属性可以创建带斑马纹的表格。margin: 0 auto居中。border显示边框。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值