Ultimate Scenario-front-end component Toggle Style Restore

This article uses Vue as an example, other frameworks or native-like principles

First look at the effect

The inspiration for this article comes from the unexpected discovery of the cross-platform solutions that have been discussed with others over the past few days, and the cross-platform development engineers, many years of front-end experience, are taking into account the instantaneous white screen of component switching and the return of components, and the original component displays the restore problem.

Misleading ideas

Powerful front-end engineers can always solve problems, such as the above problem, we take a, B two components to do the example.

1. Component switching, handwriting (transition) or using Vue-router to do A, B component Toggle Animation
2. A switch to B, no problem, no outside animation elegance problem
3. B go back to a a, no problem, but the appearance of a has a problem

A specific problem, please allow me to describe in the language, because the code example behind me is not a list type.

Scene: List to detail page, list hundreds.

• Users use scrolling to list items on the next or next screen, click Go to Details, click Back or go back to the list page when the details are finished.

• The problem occurs, the list content is refilled, and the scroll position where the list is located is restored.

OK, a small partner said, record the rolling scroll can be. Yes, but what if the page has a lot of tables (a little bit), or is there a variety of other interactions and then returns? One by one go to record configuration?

One by one configuration of course no problem, but the workload and the probability of the bug, tut-tut ...

Analysis Reason

The reason itself is to switch the level of the problem, in a nutshell: The switch of the Brother component, is a process of this elimination.

Speak the word!

Well, it means that the A and B pages above can only survive one.

A appears, b disappears; the same, b appears, the A page disappears.

So, when you return from B to a, a needs to re-render the DOM, causing the related problem, that is, if a is a simple page, there is no problem.

Launch conclusion

1. Hierarchy issues
2. Solutions for solving hierarchical problems
3. The so-called plan is that B appears when A does not disappear

See, this principle, little buddy.

Words don't say much, finally on the code:

Router

import Vue from ‘vue‘import VueRouter from ‘vue-router‘import Delegate from ‘../component/delegate/delegate.vue‘import Rule from ‘../component/rule/rule.vue‘import Rank from ‘../component/rank/rank.vue‘import More from ‘../component/more/more.vue‘import Login from ‘../component/login/login.vue‘import Empty from ‘../component/empty/empty.vue‘Vue.use(VueRouter)export default new VueRouter({  routes: [    {path: ‘/empty‘, component: Empty, alias: ‘/‘},    {path: ‘//delegate‘, component: Delegate},    {path: ‘/rule‘, component: Rule},    {path: ‘/rank‘, component: Rank},    {path: ‘/more‘, component: More},    {path: ‘/login‘, component: Login},  ]})

Pay attention to a few things.

1. The slash represents the hierarchy, because I am lazy to write the sub-route, so it appears //delegate to represent the double level.
2. Empty function, said the back, but notice here by default is empty, that is alias: ‘/‘ .

Animation

.push-enter {  transform: translateX(100%);  opacity: 0.8;}.push-enter-active {  transition: all 0.3s ease;}.push-enter-to, .push-leave {  transform: translateX(0);  opacity: 1;}.push-leave-active {  transition: all 0.3s ease;}.push-leave-to, .pop-enter {  transform: translateX(-50%);  opacity: 0.8; }.pop-enter-active {  transition: all 0.3s ease;}.pop-enter-to, .pop-leave {  transform: translateX(0);  opacity: 1;}.pop-leave-active {  transition: all 0.3s ease;  z-index: 999;}.pop-leave-to {  transform: translateX(100%);}

Animation effect, here is to imitate the mobile page switch animation, there is a mobile experience small partners can understand, is similar to VC and Activity switch that stack into the stack effect.

But the cut-off position, did not solve the above problem, yes, the focus is below.

Place an empty subassembly on the current page

Say is not solved, actually logically already has that meaning, back to see Router there, there is not a Empty, yes, this is in each page is displayed, placed on the existing page of a sub-component, but the size of 0x0, location arbitrary, suggested put in the upper left corner, because we control the CSS is to modify the x direction.

<template>  <div id="empty"></div></template><script>export default {}</script><style></style>

I was lazy here, so I wrote the Empty.vue.

Then there is the sibling component configured with Empty siblings, and you may have thought that the sibling component is on the right and waiting outside the screen (although it may not be rendered at this time).

So, its key style (public) is this:

.page {  position: fixed;  left: 0;  top: 0;  width: 100%;  height: 100%;}

With the entry animation above, you can achieve a similar effect on the right.

Here, it is recommended to use absolute instead of fixed, although fixed seemingly once and for all, there will be different problems on different platforms.

Here, the basic principle is clear, the following simple summary:

1. It's not brother. Component Vision Switching
2. It's a parent-child visual switch.
3. But it's still a brother. Component switching
4. A default Empty component is placed above the existing parent component, size 0x0
5. Switching between this 0x0 component and its sibling component changes

Actual effect

Experience Address: Full featured Demo

Copy-write: Copy-write

Github

If you solve the problem, please drop a star ha.

Ultimate Scenario-front-end component toggle Style restore