Summary of the application of transition components in Vue projects

​Transtion in vue is an animation transition encapsulation component. A common scenario is that the DOM wrapped with the transition tag contains animation effects. The animation effect transition settings of the transition component are based on the transition property settings of CSS. Here I will introduce the application of transition components in Vue in the project.

Single pop-up application

Notice:

• The name of the name is the same as the beginning of the following style class.
• Use v-if to cooperate with the execution of animation effects

<template>
  <div>
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  },
}
</script>

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: all .5s;
}
 .fade-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
.fade-enter{
  opacity: 0;
  transform: translateX(-20px);
}
</style>

Content switching control effect

Notice:

1. key: can be any value, and the animation switching is controlled by switching the key value. The components can be arbitrary and can remain unchanged. It is up to you whether to change or not. You can use the component tag with is, or directly use v-if.
2. The component bound to the key needs to be set to absolute positioning, otherwise there will be a lag when switching. You can also set mode="out-in" or mode="in-out" one after the other. It depends on your personal needs.

<template>
  <div>
    <transition name="fade">
      <button class="position" @click="change" :key="status">
        Component</button>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      status: '1',
    }
  },
  methods: {
    change () {
      if(this.docState === '1'){
        this.docState = '2'
      }else{
        this.docState = '1'
      }
    }
  }
}
</script>

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: all .5s;
}
 .fade-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
.fade-enter{
  opacity: 0;
  transform: translateX(-20px);
}
.position{
  position: absolute;
}
</style>

Use with animate framework

Notice

• The value of name must be set to: custom-classes-transition
• enter-active-class, leave-active-class to control the appearance and disappearance styles

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="external nofollow" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

The page is loaded for the first time and the animation is executed

Adding appear to transition

This is the end of this article about the application of transition components in Vue projects. For more relevant content about transition components in Vue, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!