Detailed explanation of Vue transition effects and animation transition usage examples

Let’s look at an example first

The code is as follows

<template>
  <div align="center" style="margin-top: 100px;">
    <button @click="show= !show" >Test</button>
    <transition>
      <div v-if="show">
        <p>This is a piece of text</p>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'transitionTest',
  data () {
    return {
      show: true
    }
  }
}
</script>
<style scoped>
    .v-enter-active, .v-leave-active {
    transition: all .5s ;
    }
    .v-enter {
    transform: translateY(50px);
    opacity: 0;
    }
    .v-leave-active {
    transform: translateY(50px);
    opacity: .5;
    }
</style>

Wrap a div component and click the button to achieve the animation effect. It is usually used with v-if, v-show, dynamic components, and component root nodes.

transition hook function

Transition provides six hook functions, allowing us to write corresponding animation effects at different times. The following are the execution times of these six hook functions

1.v-enter: Enter the transition start state. Takes effect before the element is inserted and is removed in the next frame after the element is inserted.

2.v-enter-active: The state when the transition takes effect. This class can be used to define entry transition timing, delays and curve functions.

3.v-enter-to: Enter the end state of the transition. Takes effect one frame after the element is inserted (at the same time v-enter is removed), and is removed after the transition/animation is complete.

4.v-leave: Leave the starting state of the transition. Takes effect immediately when a leaving transition is triggered, and is removed on the next frame.

5.v-leave-active: The state when the leaving transition takes effect. This class can be used to define the duration, delay and curve function of the leaving transition.

6.v-leave-to: Leave the end state of the transition. Takes effect the next frame after the leaving transition is triggered (at the same time v-leave is removed), and is removed after the transition/animation is complete.

Custom transition class name

There are multiple places on the page that need transition effects. If you use the default 6 hook functions provided by Vue, the transition effects of all places to be transitioned will be the same. If we need to define different animation effects in different situations, we need to define the class name specific to each transition effect. The solution is to add a name attribute to the transition tag and write your own class name prefix in the name attribute. For example, when using class names, it would be like this: .my-trans-leave, .my-trans-enter-to. like:

    <transition name="my-trans" mode="out-in">
       <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>

style, my-trans is the prefix of ".my-trans-enter-active"

<style>
  .my-trans-enter-active,
  .my-trans-leave-active {
    transition: all .2s;
    opacity: 1;
  }
  .my-trans-enter {
    transition: all .2s;
    opacity: 0;
  }
  .my-trans-leave-to {
    transition: all .2s;
    opacity: 0;
  }  
</style>

Use of transition-group

When performing transition rendering on a list, you must wrap it with the transition-group element. Click on the content in the list to remove it according to the following animation. The example is as follows

<template>
  <div class="main_css">
    <transition-group name="slide">
      <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
        {{ item.id }} --- {{ item.name }}
      </li>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: 'transitionGroupTest',
  data () {
    return {
      list: [{
        id: 1,
        name: 'Braised Fish'
      },
      {
        id: 2,
        name: 'Fried potatoes'
      },
      {
        id: 3,
        name: 'Roasted Eggplant'
      }
      ]
    }
  },
  methods: {
    del (i) {
      this.list.splice(i, 1)
    }
  }
}
</script>
<style scoped>
  .main_css {
    margin-left: 50px;
    margin-top: 50px;
  }
  .slide-enter-active {
    transition: all .5s linear;
  }
  .slide-leave-active {
    transition: all .1s linear;
  }
  .slide-enter {
    transform: translateX(-100%);
    opacity: 0;
  }
  .slide-leave-to {
    transform: translateX(110%);
    opacity: 0;
  }
</style>

summary

Transition and animation are completed using the transition tag, and 6 hook functions are provided. The global animation is in app.vue, and the transition is wrapped in the router-view component, such as: ; Add the name attribute to the transition tag to define the transition class name to achieve local changes.

The above is a detailed explanation of the usage examples of Vue transition and animation transition. For more information about Vue transition and animation transition, please pay attention to other related articles on 123WORDPRESS.COM!