Realization of transition Animation by Vue

1. The animation is divided into two stages
-1-enter the animation
-2 from the main page and return to the main page
2. Problem description:
when entering the details page from the main page, the main page is destroyed instantly, leaving the details page in the animation, resulting in the blank of the main page when there is animation; but when returning from the details page to enter the main page, there will be a detail page superimposed on the main page
3. Question
when you enter the details page, you can also have the effect of a detail page superimposed on the main page (the main page is delayed to be destroyed)
4. The screenshot of the page is as follows:
-1-enter the details page

clipboard.png

-2-

clipboard.png

5. How do you achieve an effect like return when you enter?

Mar.03,2021

The entry and exit of the

page will match the css animation

Core Code

<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive>
        <router-view class="child-view "></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      transitionName: "slide-left"
    };
  },
  watch: {
    $route(to, from) {
        //
      const prevStamps = from.query.stamps || 0;
      const nextStamps = to.query.stamps || 0;
      this.transitionName =
        prevStamps > nextStamps ? "slide-right" : "slide-left";
    }
  }
};
</script>
.child-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition-property: transform,opacity;
  transition-duration: 0.6s;
  transition-timing-function: ease-out;
  background-color: -sharpffffff;
  display: flex;
  flex-direction: column;
}
.slide-left-enter {
  opacity: 0;
  transform: translate(100%, 0);
}
.slide-left-enter-active {
  z-index: 10;
}
.slide-left-leave-active {
  z-index: 0;
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate(100%, 0);
  z-index: 11;
}
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-1be9855-31962.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-1be9855-31962.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?