Summary of the application of transition component in vue in project

Transtion in vue is an animation transition package component. In common scenarios, the DOM wrapped with the transition tag contains animation effects. The transition of the transition component's animation effect transition setting is based on the transition property settings of the css. Let me introduce the application of transition components in vue in the project.

Single pop-in pop-up application

Notice:

• What is the name, then the following style class starts with
• V-if to perform 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 animation switching can be controlled through key value switching. Components can be arbitrary, and whether they change or not depends on themselves. You can use the component tag to match is, or you can use the v-if directly.
2. The component that binds the key needs to be set to absolute positioning, otherwise the switching will be stuttered. You can also set mode="out-in" or mode="in-out" one before and one after another. It depends on your personal needs

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

<script>
export default {
  data () {
    return {
      status: '1',
    }
  },
  methods: {
    change () {
      if( === '1'){
         = '2'
      }else{
         = '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 the 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="/npm/@3.5.1" rel="external nofollow"  rel="stylesheet" type="text/css">

<div >
  <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

Add appear to transition

This is the article about the use of transition components in vue in this project. For more related transition components in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!