Vue2.0整合Animate

最新推荐文章于 2024-04-29 15:45:02 发布
最新推荐文章于 2024-04-29 15:45:02 发布
阅读量338 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dan47645/article/details/106268262
版权

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

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

第一种：

安装

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">

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

Apple South
关注
专栏目录
关于 Vue 引用 animate.css 动画 不起作用的问题（版本兼容性）神坑
wenfu814的博客
08-24 2032
1. Vue 官网引用的是 animate.css 3.5 版本 <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> 2. 不能引用 animate.css 最新版本 例如：(4.0) <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ ajax/libs/animate.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
Vue整合animate.css
qq_55628994的博客
05-08 314
1.npm install animate.css -s 弱pacage.json里的dependencies里有animate.css那就说明安装成功 2.引入animate.css import 'animate.css' 3.使用样式 <div class="animate__animated animate__bounce"> hhh快出来 </div> ...
在vue2中使用动画库
qq_55685361的博客
05-09 1303
一、在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 C3动画 vue2-animate
程先生的博客
06-02 424
　　最近写vue的项目，需要添加一个动画，首先想到的就是jQuery中常用的第三方库，animate，但是这个不是能完全兼容的，需要自己做处理。然后就在晚上寻找Vue版本的动画库，然后就找到了这个vue2-animate。网上的教程还是不少的，然后demo能直接运行，但是他们有一点没有写的很明白，就是在添加enter-active-class或leave-active-class属性的时候。官方...
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+组件开源项目库集合
熊大小哥哥
10-11 728
UI组件element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2...
尚硅谷VUE核心技术课件资料-笔记总结
04-17
- 动画库整合：如Animate.css、Velocity.js等，与Vue结合实现复杂动画。 10. **单文件组件(SFC)** - 单文件组件结构：理解SFC的组成，包括template、script、style部分。 - 静态资源导入：在SFC中导入CSS、图片...
Vue组件汇总
2401_84446787的博客
04-29 759
★210 - 创建VueJS动态表格★205 - vue图片剪裁上传组件★204 - 所见即所得的编辑器★203 - VueJS的双向下拉刷新组件★202 - 在vue1和vue2中使用滑块★200 - Vue全家桶+Socket.io+Express/Koa2打造一个智能聊天室★179 - 基于Vue的markdown编辑器★173 - VueJS的3D轮播组件★170 - 基于 Vue 2的百度地图组件库★170 - 精美的点击提示对话框★168 - 粒子背景的vue组件。
Vue组件汇总_小胖梅后台管理系统资料
最新发布
2401_84446825的博客
04-29 831
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
animated-vue, 使用 animate.css 动画作为Vue2过渡的插件.zip
09-16
animated-vue, 使用 animate.css 动画作为Vue2过渡的插件 动画 vue使用 animate.css 动画作为Vue2过渡的插件演示: 即将推出 ！安装和使用从npm安装动画 vue 和收费的animate.cssnpm install --save animated-vue animat
vue2.0 和 animate.css的结合使用
11-29
这里说的是vue2.0和animate.css的结合使用。其实用过就知道用法是比较简单的。但是就是刚开始使用的时候，难免有的会遇到各种问题。简单的说说我所用过并且遇过的坑。     首先是transition组件，在2.0中由transition属性变成了一个独立的组件。    用法：    1、      要用animate.css，那么首先需要做的就是导入它。局部的导入的话，就在当前的.vue文件中的style标签中导入：@import “animate.css”;   注意，导入css文件的时候。在末尾应该是要加上分号的。如果不加的话，会影响后面写的局部样式  2、   开始使用anim
孙叫兽VUE学习笔记总结（值得收藏），很全很详细！！！
孙叫兽的博客
12-22 2580
官方文档：http://vuejs.org/v2/guide/syntax.html 中文文档:https://cn.vuejs.org/v2/guide/syntax.html Vue （读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合使用时， Vue 也完全能够为复杂的单..
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
vue 结合 animate.css
aoyi2760的博客
12-12 85
这里说的是vue2.0和animate.css的结合使用。其实用过就知道用法是比较简单的。但是就是刚开始使用的时候，难免有的会遇到各种问题。简单的说说我所用过并且遇过的坑。 首先是transition组件，在2.0中由transition属性变成了一个独立的组件。 用法： 1、 要用animate.css，那么首先需要做的就是导入它。局部的导入的话...
vue2+animate.css
liudanyang_21的博客
08-23 170
下载animate.css并引入项目, import './css/animate.css'使用： <template> 　　<div class="box"> 　　　　<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight"> 　　　　　　<button @click="decrease" v-show="home.count
vue2中使用Animate.css动画插件
qq_60654563的博客
06-09 2511
vue2中使用Animate.css动画插件
vue之vue与animate.css动画结合
Quincy.Coder的博客
12-04 1575
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-动画</title> <script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script> <script src="https://unpkg.com/lodas
Vue2：简单使用Animate.css动画效果
欢迎来到长风沛雨的博客
07-13 2030
简单的使用一下Animate的动画效果（安装，使用，速度）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值