vue进入/离开 & 列表过渡transition
一.transition过渡
1.需求1(优化):想要一种效果,想要ios那种页面切换效果,总而言之就是过渡效果。
附上官网介绍地址:https://cn.vuejs.org/v2/guide/transitions.html
1.
App.vue代码片段如下:
<template>
<div id="app">
<transition :name="transitionName">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition :name="transitionName">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>
</div>
</template>
以上是HTML上的代码,在keep-alive外层,增加transition,并且绑定name属性transitionName(这个是一个变量,用来控制想要加的样式前缀),看了下面的代码你就懂了:
watch: {//使用watch 监听$router的变化
$route(to, from) {
//如果to索引大于from索引,判断为前进状态,反之则为后退状态
if(to.meta.index > from.meta.index){
//设置动画名称
this.transitionName = 'slide-left';
}else{
this.transitionName = 'slide-right';
}
}
}
import Vue from 'vue';
import VueRouter from 'vue-router' import Home from '@V/home'
import List from '@V/list'
import Approve from '@V/approve'
import DetailInfo from '@V/detailInfo'
import Info from '@V/info' Vue.use(VueRouter) export const routes = [
{
path:'/',
name:'home',
component:Home,
meta: {
keepAlive: false,
index:
},
},
{
path:'/list',
name:'list',
component:List,
meta: {
keepAlive: true,
index:
},
},
{
path:'/approve',
name:'approve',
component:Approve,
meta: {
keepAlive: false,
index:
},
},
{
path:'/detailInfo',
name:'detailInfo',
component:DetailInfo,
meta: {
keepAlive: false,
index:
},
},
{
path:'/info',
name:'info',
component:Info,
meta: {
keepAlive: false,
index:
},
}
]
看到这里估计你仅仅是知道transition变量是根据页面切换to和from索引来控制值,其实这个值是一个过渡类名的前缀,用来拼接transition的过渡状态,以下引用官方的解释:
过渡的类名
在进入/离开的过渡中,会有 6 个 class 切换。
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。v-enter-to
: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-enter
被移除),在过渡/动画完成之后移除。v-leave
: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。v-leave-to
: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时v-leave
被删除),在过渡/动画完成之后移除。
对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>
,则 v-
是这些类名的默认前缀。如果你使用了 <transition name="my-transition">
,那么 v-enter
会替换为 my-transition-enter
。
以上是官方的解释,下面看看css是怎么写的:
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 500ms;
position: absolute;
}
.slide-right-enter {
opacity:;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
opacity:;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity:;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
opacity:;
transform: translate3d(-100%, 0, 0);
}
以上就是把transition的状态写了个过渡样式,加上这样的代码,你就可以实现需求一。附上完整代码:
<template>
<div id="app">
<transition :name="transitionName">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition :name="transitionName">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>
</div>
</template> <script> export default {
name: 'app',
data(){
return {
// text:sessionStorage.getItem('parameters')
transitionName:''
}
},
watch: {//使用watch 监听$router的变化
$route(to, from) {
//如果to索引大于from索引,判断为前进状态,反之则为后退状态
if(to.meta.index > from.meta.index){
//设置动画名称
this.transitionName = 'slide-left';
}else{
this.transitionName = 'slide-right';
}
}
}
}
</script> <style lang="less">
@import '~vux/src/styles/reset.less'; #app{
/*position: relative;*/
}
body {
background-color: #fbf9fe;
}
.vux-x-icon {
fill:#1d83ef;
}
.backicon {
width:38px;
height:38px;
display:inline-block;
border-radius:%;
border:1px solid #1d83ef; }
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 500ms;
position: absolute;
}
.slide-right-enter {
opacity: ;
transform: translate3d(-%, , );
}
.slide-right-leave-active {
opacity: ;
transform: translate3d(%, , );
}
.slide-left-enter {
opacity: ;
transform: translate3d(%, , );
}
.slide-left-leave-active {
opacity: ;
transform: translate3d(-%, , );
}
</style>
注明:上周5同事发现了一个bug,发现用transition之后,切换页面的时候可能可能可能会出现一个问题:会出现短暂的白板!!!同事说,可能是加了transition左右滑动的时候定位出现的问题,所以出现短暂白板。当时的解决方案就是,在app.vue中的,给#app加了个样式,position:relative,其他的子组件每个最外层都加了个position:absolute。这样就完美解决了。不过今天写博客的时候,我又实验了一把,没出现白板的问题。如果出现以上问题,就试试加个定位吧。
另外,还有个bug,上面的代码,是通过v-if去判断缓存,而且有两个transition,运行起来发现,切换页面的时候交替闪现,其实,这里也猜到了,是两个transition通过v-if判断的时候,出现的交错的bug。下面继续完善上面的需求:
下面是文档介绍:
include - 字符串或正则表达式。只有匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
下面贴上更改后app.vue的代码:
<template>
<div id="app">
<transition :name="transitionName">
<keep-alive include="list">
<router-view></router-view>
<!--<router-view v-if="$route.meta.keepAlive"></router-view>-->
</keep-alive>
</transition>
<!--<transition :name="transitionName">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>-->
</div>
</template>
app.vue其他地方不变,这里引入的include(当然,如果你喜欢用exclude也可以,相反而已,排除引号内的组件名字,以外的都要缓存)是要缓存的组件name,多个缓存页面name用逗号分隔。比如:include="list,info,home"
所以路由页面的页不用设置meta:{keepAlive:true}了,路由代码如下:
export const routes = [
{
path:'/',
name:'home',
component:Home,
meta: {
index:1
},
},
{
path:'/list',
name:'list',
component:List,
meta: {
index:2
},
},
{
path:'/approve',
name:'approve',
component:Approve,
meta: {
index:3
},
},
{
path:'/detailInfo',
name:'detailInfo',
component:DetailInfo,
meta: {
index:3
},
},
{
path:'/info',
name:'info',
component:Info,
meta: {
index:4
},
}
]
over,这是今天的内容,自己的一份记录,也希望对你有帮助。
vue进入/离开 & 列表过渡transition的更多相关文章
- vue总结 04过渡--进入/离开 列表过渡
进入/离开 & 列表过渡 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CS ...
- vue过渡 & 动画---进入/离开 & 列表过渡
(1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...
- Vue列表过渡
前面的话 本文将详细介绍Vue列表过渡 概述 前面分别介绍了单元素CSS过渡和JS过渡,以及多元素过渡.如何同时渲染整个列表呢?在这种情景中,需要使用<transition-group>组 ...
- vue 过渡效果-列表过渡
到目前为止,关于过渡我们已经讲到, 单个节点 同一时间渲染多个节点的一个 那么怎么同时渲染整个列表,比如使用v-if?在这种场景下,使用<transition-group>组件,在我们深入 ...
- Vue基础进阶 之 列表过渡
在前面的博客我们一直在操作单个元素的过渡,如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了: 如何使用:将要操作的列表元素放在<transi ...
- Vue中Js动画 与Velocity.js 多组件多元素 列表过渡
Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...
- Vue过渡效果之CSS过渡
前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...
- Vue过渡效果之JS过渡
前面的话 与CSS过渡不同,JS过渡主要通过事件进行触发.本文将详细介绍Vue过渡效果之JS过渡 事件钩子 JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子 <transitio ...
- 初学vue----动画过渡transition简单部分
使用动画效果要用transition包裹,transition(<trsnsition name="xx"><div></div></tr ...
随机推荐
- 洛谷 P3391 文艺平衡树
题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 --b ...
- HDU P2222 Keywords Search
In the modern time, Search engine came into the life of everybody like Google, Baidu, etc.Wiskey als ...
- git忽略相应文件夹,不上传
1.在项目根目录里 右键选择Git Bash 进入命令行 2. touch .gitignore ,生成“.gitignore”文件. 3. .gitignore文件里输入以下内容.DS_Stor ...
- number to string
C++进行int to string和string to int 下面方法一存在内存泄露 #include<strstream>void main(){ std::strstream ss ...
- 专访探探DBA张文升:PG在互联网应用中同样也跑的很欢畅
张文升认为,PG无论在可靠性和性能方面都不输其它任何关系型数据库 张文升,探探DBA,负责探探的数据库架构.运维和调优的工作.拥有8年开发经验,曾任去哪儿网DBA. 9月24日,张文升将参加在 ...
- flask代码统计作业
用户表: create table userInfo( id int not null unique auto_increment, name )not null, password ) not nu ...
- git操作合集
目录 安装 下载 本地配置 创建用户凭证ssh 忽略文件 基础操作 新建仓库 克隆仓库 获取更新 推送更新 查看历史 版本回退 分支 别名 linux服务器 疑难问题 清除历史大文件 安装 下载 下载 ...
- Django 简单教程(入门级)
一.Django简介 1. web框架介绍 具体介绍Django之前,必须先介绍WEB框架等概念. web框架: 别人已经设定好的一个web网站模板,你学习它的规则,然后“填空”或“修改”成你自己需要 ...
- 为exchange 2010 owa 添加验证码
微软给了exchange owa页面加固的方案,如有需要,请查看. https://partnersupport.microsoft.com/zh-hans/par_servplat/forum/pa ...
- ppt基本操作
一.概述及作用 ppt是一种表达用户思想的有力工具,无论是介绍一个计划,介绍一个新的产品,或是员工报告,员工培训,只要事先做一个演示文稿,那么阐述的过程就会变得见面,简明和清晰. 二.界面构成 演示文 ...