Vue自定义动画和animate.css使用
来源:互联网 发布:react.js 教程 pdf 编辑:程序博客网 时间:2024/05/28 03:02
看过很多篇讲transition的文章,,我再废话一遍~
还是接着上一篇的项目接着写
1、自定义动画
用<transition></transition>将你需要用动画展示的内容包裹起来,比如路由视图:
<transition name="fadein"> <router-view></router-view></transition>
基于动画fadein,有4个关联的样式类:
fadein-enter//初始状态
fadein-enter-active//显示时的状态,即从初始状态变化而来的状态
fadein-leave-active//离开时的状态
fadein-leave//离开后的状态
比如一个透明变化的效果:
.fadein-enter-active,.fadein-leave-active{ opacity: 1; transition:opacity .7s; -webkit-transition:opacity .7s; }.fadein-enter,.fadein-leave { opacity: 0; transition:opacity .7s; -webkit-transition:opacity .7s; }
2、配合animate.css使用的动画
下载animate.css并引入项目 https://daneden.github.io/animate.css/
@import './assets/animate.css';
<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight"> <router-view></router-view></transition>
.fadeInLeft,.fadeOutRight是animate.css里的一个样式类,,前面的.animated一定要加上,否则效果出不来
阅读全文
0 0
- Vue自定义动画和animate.css使用
- vue 和animate.css 的动画使用
- vue和animate.css怎么结合使用
- VUE引用animate.css动画库
- vue之vue与animate.css动画结合
- 三六、vue中使用animate.css
- Animate.css动画库的使用
- jquery animate自定义动画的使用感受
- 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效
- animate.css 动画制作
- jquery自定义动画-animate()
- jquery自定义动画animate()
- jquery自定义动画animate()
- jq 自定义动画animate
- JQuery 自定义动画( animate() )
- animate() 方法执行 CSS 属性集的自定义动画。
- css3动画简介以及动画库animate.css的使用
- css3动画简介以及动画库animate.css的使用
- 搭建ssm框架
- Git冲突:commit your changes or stash them before you can merge.
- 自定义控件之二阶贝塞尔曲线方法详解
- UML学习笔记之状态图
- 安装VirtualBox的时候遇到的问题
- Vue自定义动画和animate.css使用
- css 省略号代码
- 教你实现GPUImage【OpenGL渲染原理】
- UVA
- iOS通过SocketRocket实现websocket的即时聊天
- Python: PS 滤镜--高反差保留 (High pass)
- HttpClient发送get post请求和数据解析
- memcached存储大数据的问题
- Java线程同步使用