Here’s how to use the Transition tag

Mainly used for v-show, V-if or router-view in and out animation

  • The template
    <transition name="name" >
      <div v-show="show" ></div>
      <div v-if="show" ></div>
      <router-view/>
    </transition>
Copy the code
  • CSS
// Define the pre-enter and post-leave status.name-enter,.name-leave-to {... } // Define the pre-leave and post-enter status.name-leave,.name-enter-to {... } // define the entry and exit process. Name-enter-active,.name-leave-active {transition: all.5s}Copy the code

1. Fade in and out

    .fade-enter, .fade-leave-to {
      opacity: 0
    }
    .fade-leave, .fade-enter-to {
      opacity: 1
    }
    .fade-enter-active, .fade-leave-active {
      transition: all .2s
    }
Copy the code

2. Scale in and out

    .scale-enter, .scale-leave-to {
      transform: scale(0)
    }
    .scale-leave, .scale-enter-to {
      transform: scale(1)
    }
    .scale-enter-active, .scale-leave-active {
      transition: all .2s
    }
Copy the code

3. Left in and out (usually used in the left sidebar)

    .left-enter, .left-leave-to {
      transform: translate3d(-100%, 0, 0)
    }
    .left-leave, .left-enter-to {
      transform: translate3d(0, 0, 0)
    }
    .left-enter-active, .left-leave-active {
      transition: all .2s
    }
Copy the code

4. Enter and exit right (usually used in the right sidebar)

    .right-enter, .right-leave-to {
      transform: translate3d(100%, 0, 0)
    }
    .right-leave, .right-enter-to {
      transform: translate3d(0, 0, 0)
    }
    .right-enter-active, .right-leave-active {
      transition: all .2s
    }
Copy the code

5. Top in and out (usually used to prompt pop-ups)

    .top-enter, .top-leave-to {
      transform: translate3d(0, -100%, 0)
    }
    .top-leave, .top-enter-to {
      transform: translate3d(0, 0, 0)
    }
    .top-enter-active, .top-leave-active {
      transition: all .2s
    }
Copy the code