Vue 的 transition & 完成路由类 Tab 摆布滑动切换的结果
先说下 transition 为何能够让你定义了 v-enter, v-enter-active 以后就能够触发transition.
现实历程按我的明白应该是如许:
最最先的时刻, 先给元素加上了 v-enter, v-enter-active 两个class
鄙人一帧的时刻, 删掉 v-enter 这个class.
在过渡完毕以后, 再删掉 v-enter-active.
关于2的诠释:
这个帧的观点我刚最先没明白, 然则现实上能够明白成 ‘一段时间以后’;
你删掉 v-enter 会致使什么情况?
元素的款式会变化
那末元素如今只需定义在本身身上的款式了
所以要变回去
然后发明有定义在 v-enter-active 上面的过渡结果
就会运用过渡结果
复盘一下历程:
刚最先的时刻, 元素有本身的款式, 有 v-enter, v-enter-active 中定义的款式.
在一段时间距离, 比方说 100ms 以后, 删掉了 v-enter, 意味着元素的款式变化。
变化, 然后发明存在 transition的定义, 就运用 transition,
这就形成了我们终究瞥见的 transition结果.
给个demo:
.box {
height: 100px;
width: 100px;
background: red;
}
.v-enter {
height: 200px;
width: 200px;
}
.v-enter-active {
transition: all 2s;
}<div class="box"></div> var box = document.querySelector('.box');
box.classList.add('v-enter');
box.classList.add('v-enter-active');
setTimeout(function(){
box.classList.remove('v-enter');
}, 100);再说下元素从显现到消逝的时刻
我们晓得, 假如过渡结果的尽头是 display:none, 那末过渡结果是不会见效的, 所以我以为
v-if, v-show 对过渡结果都是有所掌握的, 它们应该是在 transitionEnd 的时刻才去运用
display:none; 或许移除元素.
然则元素脱离和元素进入还有点不一样:
你的元素在脱离的时刻, 元素是已存在于页面上, 是你已能瞥见的
然后你给它加上 v-leave, v-leave-active
根据之前的逻辑, v-leave 有款式, v-leave-active 内里有 transition
元素的款式变动-> 触发 transition, 所以加上就直接触发 transition, 还等个什么下一帧。
既然加上就触发 transition, 那你要 v-leave 干吗, 为何不直接把
款式和 transition 都加在 v-leave-active 上面呢。
临时没有发明 v-leave 的作用, 觉得不是必需的, 就是对称一样. 或许为了款式星散.
transition 过渡结果的款式现实上是有通用规律的:
.v-enter {
opacity:0;
}
.v-enter-active {
transition: all 1s;
}
.v-leave-active {
opacity: 0;
transition: all 1s;
}更罕见的写法是如许:
.v-enter {
opacity:0;
}
.v-enter-active, .v-leave-active {
transition: all 1s;
}
.v-leave-active {
opacity: 0;
}关于 transition 的一个运用: 完成路由 类 Tab 摆布滑动切换的结果.
类 Tab 摆布滑动切换的结果,就是如许:
[viewport]
[router1] [router2]
router1,2 摆布拉来拉去, 就是摆布滑动切换的结果.
那我们的题目就能够变成:
把当前的路由 router1, 和下一个路由 router2, 并列放到一行,
用户点击跳转的的时刻, 同时滑动 router1,router2
然则直觉都通知我们, 路由压根就不是这么分列的, 当你在 router1 的时刻, router2 基础就不存在啊.
不存在何来并排.
然则想一想我们之前说的, 加上 transition 以后, 元素消逝会怎么办?
元素先运用 transition, transitionEnd 的时刻, 元素才会消逝.
这个的意义就是说:
跳转的一瞬间, 当前的 route1 会最先运用 transition, 还没有消逝于页面之上.
然后下一个 router2 已建立, 已存在于页面之上.
此时, 两个 router 都是存在的.
这就是机遇.
先说下我们的 DOM 构造
<transition>
<router-view></router-view>
<transition>我们要先让两个 router 并排, how ?
定位啊:
.router-view {
position: absolute;
top: 0;
left: 0;
}按理说两个 router 都是 left:0, top:0, 应该是堆叠的是否是?
对.
所以我们对要进入的谁人 router 做下 translate
比方当前的是 router1, 点击要向前跳转到 router2, 那末对 router2 translateX(100%);
如许两个 router 是否是就并排了.
并排以后就是动起来, 也就是运用滑动结果.
两个组件都是被 transition 包裹起来所以只需定义响应的class就能够了.
先说向行进:
假定 transition 的 name = ‘slide-forward’
关于 router1:
start: 是当前的位置
end: 是当前位置的 translateX(-100%), 也就是当前位置的左侧.
关于 router2:
start: 是相关于当前位置的 translateX(100%);
end: 是当前位置.
// router1
.slide-forward-leave-active {
transition: all 1s;
transform: translate(-100%);
}
// router2
.v-enter {
transform: translateX(100%);
}
.v-enter-active {
transition: all 1s;
}再说退却, 设 transition 的 name = ‘slide-back’;
class就是:
// router1
.v-enter {
transfrom: translateX(-100%);
}
// router2
.v-enter-active {
transition: all 1s;
}
.v-leave-active {
transfrom: translateX(100%);
transition: all 1s;
}整顿一下, 获得的两个 transition,
.slide-forward-enter {
transform: translate(100%);
}
.slide-forward-enter-active {
transition: all 1s ease-in-out;
}
.slide-forward-leave-active {
transform: translate(-100%);
transition: all 1s ease-in-out;
}
.slide-back-enter {
transform: translate(-100%);
}
.slide-back-enter-active {
transition: all 1s ease-in-out;
}
.slide-back-leave-active {
transform: translate(100%);
transition: all 1s ease-in-out;
}如今再讨论一下: 我们该怎样推断当前是行进照样退却呢?
下面如许:
watch: {
'$route' (to, from) {
if (!this.map[to.path]) {
this.map[to.path] = +new Date() + 1;
}
if (!this.map[from.path]) {
this.map[from.path] = +new Date();
}
if (this.map[to.path] > this.map[from.path]) {
this.transitionName = 'slide-forward';
} else {
this.transitionName = 'slide-back'
}
}
}