vue-过渡动画
本篇资料参考于官方文档:
http://cn.vuejs.org/guide/transitions.html
概述:
Vue 在跳转页面时,提供多种不同方式的动画过渡效果。
●in-out
:新元素先进行过渡,完成之后当前元素过渡离开。
●out-in
:当前元素先进行过渡,完成之后新元素过渡进入。
<transition name="fade" mode="out-in">
<!-- ... the buttons ... -->
</transition>
过渡类名:在进入/离开的过渡中,会有 6 个 class 切换。
1,v-enter
:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
2,v-enter-active
:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
3,v-enter-to
: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter
被删除),在 transition/animation
完成之后移除。
4,v-leave
: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
5,v-leave-active
:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
6,v-leave-to
: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave
被删除),在 transition/animation
完成之后移除。
示例:App.vue
<template>
<div id="app">
<transition name='slide-fade' mode="out-in"><!-- name='名字随便取,不过要符合命名规范,哈哈' -->
<router-view></router-view>
</transition>
</div>
</template> <script>
export default {
name: 'app'
}
</script> <style>
.slide-fade-enter-active,.slide-fade-leave-active{transition: opacity .3s ease;}
.slide-fade-enter,.slide-fade-leave-active{opacity: 0;}
</style>
然后就可以在全局使用了,只要是通过路由跳转的页面,都会引用到这个过渡效果。
效果展示:
vue-过渡动画的更多相关文章
- vue过渡动画
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- Vue过渡动画—Vue学习笔记
要求:要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中. 原理:通过在特定的时刻增加/移除样式实现. ...
- vue过渡动画效果
1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...
- vue过渡 & 动画---进入/离开 & 列表过渡
(1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...
- Vue过渡动画运用transition
vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...
- Vue.js 第3章 axios&Vue过渡动画
promise 它将我们从回调地狱中解脱出来 创建和使用 var fs = require('fs') // 创建promise // reslove表示执行成功后调用的回调函数 // reject表 ...
- vue 过渡 & 动画
过渡 & 动画 过渡动画 用css先定义好动画效果 .a-enter-active, .a-leave-active { transition: all 1.5s; } .a-enter, . ...
- (学习心路历程)Vue过渡/动画 VS. 过渡/动画
[此篇为本人的个人见解和哔哔赖赖,如果有观点不对的地方,还请大家指出来哇!!] 最近实习在做一个项目,里面应用的动画效果还蛮复杂的,因为本身对Vue框架比较熟悉,所以最终选择了Vue框架. 自己之前从 ...
- vue过渡动画样式
在进入/离开的过渡中,会有 6 个 class 切换. v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义进入过渡生效时的 ...
- [原]浅谈vue过渡动画,简单易懂
在vue中什么是动画 开始先啰嗦一下,动画的解释(自我理解
随机推荐
- 图像处理------Mean Shift滤波(边缘保留的低通滤波)
一:Mean Shift算法介绍 Mean Shift是一种聚类算法,在数据挖掘,图像提取,视频对象跟踪中都有应用.本文 重要演示Mean Shift算法来实现图像的低通边缘保留滤波效果.其处理以后的 ...
- The struts dispatcher cannot be found
1.错误描述 严重:Servlet.service() for servlet jsp threw exception The struts dispatcher cannot be found.Th ...
- javax.servlet.JspTagException:Illegal use of <when>-style tag without <choose >as its di
1.错误描述 javax.servlet.JspTagException:Illegal use of <when>-style tag without <choose >as ...
- Flex的 Event中属性currentTarget与target的区别
Flex的 Event中属性currentTarget与target的区别 1.区别 (1)currentTarget是事件的处理对象(event processor) (2)target是事件的调用 ...
- Duplicate <http> element detected
1.错误描述 org.springframework.beans.factory.parsing.BeanDefinitionParsingException:Configuration pro ...
- pat1041-1050
没想到半天就做完了10题 = =,这几题太简单了,基本10分钟一题 1041 #include<cmath> #include<map> #include<iostrea ...
- TOJ 4120 Zombies VS Plants
链接:http://acm.tju.edu.cn/toj/showp4120.html 4120. Zombies VS Plants Time Limit: 1.0 Seconds Memo ...
- 关于html5 data-*自定义属性相关注意点和踩过的坑
在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式,但取值是必需全部使用小写(后面会说),使用这样的结构可以进行数 ...
- Luogu3613 睡觉困难综合征
题面描述https://www.luogu.org/problemnew/show/3613 原题NOI2014起床困难综合症https://www.luogu.org/problemnew/show ...
- mybatise插入返回主键ID
之前遇到过一次解决了,结果这次又搞了半天,在这里记录一下吧. <insert id="insertUser" useGeneratedKeys="true" ...