Vue项目引入animated
Vue官网引用的是 animate.css 3.5 版本
引用其他版本会无效
1.下载
npm install animate.css@3.5.1 -S
2.在main.js全局引入
import animated from 'animate.css' // 引入
Vue.use(animated) // 全局注册
3.使用
<div class="animated fadeInUp"></div>
给某个元素动态添加/移除动画样式:
// 添加
$('#yourElement').addClass('animated bounceOutLeft');// 移除
$('#yourElement').removeClass('animated bounce');
动画效果执行完成后添加事件:
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
fade: {title: '淡入淡出',fadeIn: '淡入',fadeInDown: '向下淡入',fadeInDownBig: '向下快速淡入',fadeInLeft: '向右淡入',fadeInLeftBig: '向右快速淡入',fadeInRight: '向左淡入',fadeInRightBig: '向左快速淡入',fadeInUp: '向上淡入',fadeInUpBig: '向上快速淡入',fadeOut: '淡出',fadeOutDown: '向下淡出',fadeOutDownBig: '向下快速淡出',fadeOutLeft: '向左淡出',fadeOutLeftBig: '向左快速淡出',adeOutRight: '向右淡出',fadeOutRightBig: '向右快速淡出',fadeOutUp: '向上淡出',fadeOutUpBig: '向上快速淡出'
},
bounce: {title: '弹跳类',bounceIn: '弹跳进入',bounceInDown: '向下弹跳进入',bounceInLeft: '向右弹跳进入',bounceInRight: '向左弹跳进入',bounceInUp: '向上弹跳进入',bounceOut: '弹跳退出',bounceOutDown: '向下弹跳退出',bounceOutLeft: '向左弹跳退出',bounceOutRight: '向右弹跳退出',bounceOutUp: '向上弹跳退出'
},
zoom: {title: '缩放类',zoomIn: '放大进入',zoomInDown: '向下放大进入',zoomInLeft: '向右放大进入',zoomInRight: '向左放大进入',zoomInUp: '向上放大进入',zoomOut: '缩小退出',zoomOutDown: '向下缩小退出',zoomOutLeft: '向左缩小退出',zoomOutRight: '向右缩小退出',zoomOutUp: '向上缩小退出'
},
rotate: {title: '旋转类',rotateIn: '顺时针旋转进入',rotateInDownLeft: '从左往下旋入',rotateInDownRight: '从右往下旋入',rotateInUpLeft: '从左往上旋入',rotateInUpRight: '从右往上旋入',rotateOut: '顺时针旋转退出',rotateOutDownLeft: '向左下旋出',rotateOutDownRight: '向右下旋出',rotateOutUpLeft: '向左上旋出',rotateOutUpRight: '向右上旋出'
},
flip: {title: '翻转类',flipInX: '水平翻转进入',flipInY: '垂直翻转进入',flipOutX: '水平翻转退出',flipOutY: '垂直翻转退出'
},
strong: {title: '强调类',bounce: '弹跳',flash: '闪烁',pulse: '脉冲',rubberBand: '橡皮筋',shake: '左右弱晃动',swing: '上下摆动',tada: '缩放摆动',wobble: '左右强晃动',jello: '拉伸抖动'
}
Vue项目引入animated相关推荐
- vue项目引入CNZZ数据专家(方法汇总篇)
vue项目引入CNZZ数据专家(方法汇总篇) 很多网站都有cnzz数据统计,用于分析网站页面受访情况. 今天就来备注一下开发经验: vue如何集成cnzz数据专家进行受访记录? 友盟+CNZZ官方文档 ...
- vue项目引入typescript(vue与ts混用)
说明 为什么要在vue项目中使用ts? 新公司给了一个关于vue项目的需求,又由于ts是JavaScript的超集,强类型数据,组件化友好.故我选择在vue项目中引入ts. 下载typescript和 ...
- VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享 前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致 一.微信公众号后台添加 js安全域名(白名单) 二 ...
- vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置 引入assets中的图标路径 (7)页 ...
- 随笔-vue项目引入axios
随笔-vue项目引入axios 本文参考链接: 一 安装axios依赖 npm install axios 二 引入axios 在main.js中引入,注意与很多第三方模块不同的是,axios不能使用 ...
- vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件 实现方式 实现原理 实现方式 要引入的文件放在public目录下,在index.html中通过script标签引入 实现原理 参考vue官网–处理静态资 ...
- Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...
- vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入 在ma ...
- vue项目引入标签云动画js函数,不执行
vue项目引入标签云动画js函数,数据重新渲染了,但是动画不执行了 rollTagCloud() {/* 3D标签云滚动函数*/const timer = setTimeout(() => {t ...
最新文章
- 【数学专题】约数个数与欧拉函数
- C++ delete 和 delete []的区别
- [提示]使用普通用户,通过sealos安装ks,默认还是要通过root用户才能正常使用kubectl等命令
- ConcurrentHashMap的源码分析-数据迁移阶段的实现分析
- xclock 不出来界面_macOS 使用 XQuartz 支持 X11 实现 Linux 图形化界面显示
- ORA-03113: end-of-file on communication channel
- 网易云音乐刷听歌量_网易云音乐极速版悄然上线!听歌体验同之前没有差别
- PBXCp Error
- 两道图片隐写的CTF题
- 浏览器下载大文件时下载完成但大小对不上
- MEMS惯性导航单元的标定与测试
- PPT要怎么做?需掌握的一些制作设计技巧
- DJFocus是个什么东东
- ThingsBoard 添加指定客户首页展示仪表板功能
- 基于神经网络的人脸识别(Tensorflow,opencv,dlib,cnn,)
- 海外有哪些免费的0元虚拟主机(免费空间或者免费虚拟主机)
- 解决gpedit问题
- 让你低调的app脱颖而出
- 腾讯云轻量应用服务器网站搭建基础教程简单易学
- GaRy-Liang的linux成长日记3-自动化安装