Vue animation basic practice, make your page more silky

1. Effect picture

First on the renderings:

2. Code

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

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

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
    
    
  transition: opacity 1.5s;
}
.fade-enter, .fade-leave-to {
    
    
  opacity: 0;
}
</style>

Three. Detailed

Vue provides a variety of different ways to apply transition effects when inserting, updating or removing the DOM. The following tools are included:

• Automatically apply classes in CSS transitions and animations
• Can be used with third-party CSS animation libraries, such as Animate.css
• Use JavaScript in the transition hook function to directly manipulate the DOM
• Can be used with third-party JavaScript animation libraries, such as Velocity.js

The transition component will automatically add a class to nested elements , which can be used for CSS excessive animation, which will be explained in detail below.

1. Transition class name

2. Attention

For these class names that are switched during the transition, if you use an unnamed one <transition>, then v- is the default prefix for these class names. If you use <transition name="my-transition">, it v-enterwill be replaced my-transition-enter.

v-enter-active and v-leave-active can control different transition curves of entering/leaving transition.