[question] I would like to ask about the animation of page switching in vue.

other pages are normal when the page is switched, but when the browsing history returns to the personal page

the orange part of the page switching animation will be stuck at the bottom for about 0.2s and then
bounce to the top, instead of sliding around as other pages normally switch

the following is the CSS code for switching animation

.Router {

transition: all 0.4s ease;
-webkit-overflow-scrolling: touch;

}

.resume-left-enter,
.notify-right-leave-active {

opacity: 0;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);

}

.resume-right-enter,
.notify-left-leave-active {

opacity: 0;
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);

}

Css vue.js javascript

Nov.26,2021

is the orange part a picture? Change the picture to div+css;

solved the problem

seems to slide the original page is also display:block (exclusive one line), so the new page will be topped

you need to add a relative positioning when you are writing the switching CSS animation

here is the animation code

.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: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

Previous: Error reporting problem of vue imported subcomponents

Next: Element-ui upload problem

About mouse slide events in vue
the following figure shows that if you want to make a mouse slide over the picture, the mesh box moves along with the mouse. Encountered a very strange problem, figure 1 is normal, but when I move the mouse again, it becomes figure 2. If you move contin...

Css vue.js javascript

Mar.05,2021
On the mobile phone page, there is an input box with the fixed positioned at the bottom. How to keep the input box fixed above the keyboard when the keyboard appears?
in vue s mobile phone page, the input box is fixed at the bottom of the page through fixed. When the keyboard appears, it is topped by the keyboard, but if it slips down, the input box slides again. How to keep the input box motionless when sliding, and...

Css vue.js javascript

Mar.14,2021
How to refresh and reload individual components in vue
how vue refreshes the current component and subcomponents within a component. for example, there is an input in the component that I typed. When I swipe the component, it is tantamount to re-entering the component and cannot destroy the vuex. the $forc...

Html5 node.js css vue.js javascript

Aug.18,2021
Write a tree list with the recursive components of vue, and there is a question about the line display of the recursive structure.
vuejson: afterbefore ...

Tree-structure Recursive css vue.js javascript

Dec.21,2021
How to align pictures horizontally when there are multiple pictures on the same line
<ul> <li class="normal-block"> <img class="templateImg" src="static images reportDayDefault.png" alt="" width="108px"> <p style="font-size:12px;color:-sharp55...

Css vue.js javascript

Mar.11,2022

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e463ec-44b78.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e463ec-44b78.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?