vue2使用animate css
2024-09-29 10:59:02
先上几个链接
vue插件大集合:awesome-vue
vue2插件: vue2-animate:vue2-animate
vue2插件vue2-animateDEMO: vue2-animatedemo:vue2-animate-demo
我想用过animatecss的都知道这是一个极其简单而又酷炫的css动画库,但是我想在vue2中使用animatecss却是很麻烦的事。
其实vue的官网上在使用过度的时候就说过和animate配合很好什么的bulabula,但是要是用的话也好麻烦,还要自己根据过度类名的写法写css,或者绑定一堆属性,
但是但是,今天翻awesome-vue的时候正好看到有这么个插件:vue2-animate正好符合我们的需求
vue2-animate
这个插件呢是个纯css库,只是简单地将原来的animate的动画类名写成了可以被vue的过渡标签直接使用的类名了。虽然仅仅是如此就极大地方便了我们的使用。
使用vue2-animate
其实直接看他的github就非常快了
这里简单地复述一遍
安装
安装的方式有很多种
1> 在html文件中直接引用从github上下载的资源
<link rel="stylesheet" href="vue2-animate.min.css">
2>如果使用webpack并且用对了css-loader可以使用npm 安装
npm安装包依赖
npm install --save vue2-animate
在main.js中引用
require('vue2-animate/dist/vue2-animate.min.css')
或者
import 'vue2-animate/dist/vue2-animate.min.css';
3>使用less
@import "<PATH_TO_SOURCE>/src/vue2-animate.less";
4>使用构建器编译
git clone https://github.com/asika32764/vue2-animate.git
cd vue2-animate
npm install
npm run build #Compiled .css files go to the dist folder
使用
1>基本的使用就是在过度元素上使用对应的name属性
<transition-group name="fadeLeft" tag="ul">
<li v-for="item in items" v-bind:key="item">
{{ item }}
</li>
</transition-group>
2>使用不同的载入载出动画
》》》第一种:使用custom-classes-transition,需要在不同的载入载出动画上加-enter和-leave后缀
<transition
name="custom-classes-transition"
enter-active-class="bounceLeft-enter"
leave-active-class="bounceRight-leave"
>
<p v-if="show">hello</p>
</transition>
》》》第二种:使用in/out类名在动画名后面加上In或者Out
<transition
name="bounce"
enter-active-class="bounceInLeft"
leave-active-class="bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
现在支持的动画
Bounce
bounce
bounceDown
bounceLeft
bounceRight
bounceUp
Fade
fade
fadeDown
fadeDownBig
fadeLeft
fadeLeftBig
fadeRight
fadeRightBig
fadeUp
fadeUpBig
rotate
rotateDownLeft
rotateDownRight
rotateUpLeft
rotateUpRight
Slide
slideDown
slideLeft
slideRight
slideUp
Zoom
zoom
zoomDown
zoomLeft
zoomRight
zoomUp
最新文章
- Android的PopWindow动画实现
- 重温Servlet学习笔记--response对象
- __definedGetter\Setter__的一些想法
- MyBatis操作指南-与Spring集成(基于注解)
- Net分布式系统之三:Keepalived+LVS+Nginx负载均衡之高可用
- AC日记——向量点积计算 openjudge 1.6 09
- Java反射与动态代理
- sdut 2416:Fruit Ninja II(第三届山东省省赛原题,数学题)
- 彻底解决_OBJC_CLASS_$_某文件名";, referenced from:问题转
- uc/os学习入门:在32位pc机上搭建编译环境
- BOM的来源是不可能出现的字符,GB2312双字节高位都是1,Unicode理论的根本缺陷导致UTF8的诞生
- 《University Calculus》-chape5-积分法-积分的定义
- Hard Process(二分)
- 关于初学loadrunner的心得体会
- Spring之Bean的基本概念
- Linux实战案例(3)创建和删除用户
- 1. Linux系统介绍
- L1-063 吃鱼还是吃肉
- Python-TXT文本操作
- Mysql 知识(2)