This is the 11th day of my participation in the August Wenwen Challenge.More challenges in August

Transition and transition-group are the built-in components of transition and transition-group.

transition

Transition is a single element/component transition encapsulation component provided by Vue. If you conditionally render “V-if”, conditionally display “V-show”, dynamic components, and component root nodes, you can use Transition to add an entry/exit transition to any element or component.

The transition class

There are six transition classes, among whichEnter the enterThree,Leave leave3, as shown below:

  1. From indicates the start state of entering or leaving.

  2. Active Indicates the transition state of entering or leaving. Apply throughout the transition phase, apply before the element is inserted, and remove after the transition/animation is complete. This class can be used to define transition process time, delay and curve functions.

  3. To indicates the end state of entering or leaving.

What is worth our attention is:

  • The v in the figure represents the value of the transition name attribute. For example, name=”slide-fade”, v-enter-from will change to slide-fade-enter-from

  • In Vue3, enter-class has been renamed to enter-from-class and leave-class has been renamed to leave-from-class, which is different from Vue2.

How to use

CSS transition the transition

Suppose we use transition like this, as follows:

<transition name="fade">
    <p v-show="show">world</p>
</transition>
Copy the code

So, we need the corresponding CSS style, as follows:

// The transition state between entering and leaving.fade-enter-active..fade-leave-active {
    transition: opacity 0.5 sease; } // The beginning of entry the end of departure.fade-enter-from..fade-leave-to {
    opacity: 0;
}
Copy the code

Analogous to the original hover effect, Enter corresponds to the mouse move in effect and leave corresponds to the mouse move out effect.

CSS animations

What if we were to animate the above transition, as follows:

// Here are the animations to add in and out.fade-enter-active {
    animation: fade-in 0.5 s;
}
.fade-leave-active {
    animation: bounce-in 0.5 sreverse; } // This is keyframes@keyframes fade-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1); }}Copy the code

Custom transition class class name

When combined with third-party animation libraries, we can customize the transition class name, which takes precedence over the normal class name. The attributes of the custom class name are as follows:

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class

Use as follows:

<transition name="bounce" 
        enter-active-class="animate__animated animate__tada"
        leave-active-class="animate__animated animate__bounceOutRight">
    <p v-show="show">world</p>
</transition>
Copy the code

The effect of the custom class name is displayed, rather than the effect of the name attribute.

JavaScript hooks

We can declare JavaScript hooks in attributes so that we can manipulate el in the corresponding hook as follows:

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"/ / onlyv-show
  :css="false"
>
  <! -... -->
</transition>
Copy the code

We need to give them their corresponding functions, as follows:

methods: {
    //***** enter *****
  beforeEnter(el) {
    // ...
  },
  // When combined with CSS
  The done callback is optional
  enter(el, done) {
    // ...
    done()
  },
  afterEnter(el) {
    // ...
  },
  enterCancelled(el) {
    // ...
  },

  //***** left at *****
  beforeLeave(el) {
    // ...
  },
  // When combined with CSS
  The done callback is optional
  leave(el, done) {
    // ...
    done()
  },
  afterLeave(el) {
    // ...
  },
  // leaveCancelled is used only in V-show
  leaveCancelled(el) {
    // ...}}Copy the code

Matters needing attention

  1. CSS transitions and animations can be used at the same time. You can use transitions to enter and animations to leave, depending on your own needs.

  2. The Transition component needs to be used sensibly, and sometimes the native one may be simpler.

transition-group

Transition-group is a transitional encapsulation component of the multi-element/component provided by Vue. By default, it does not render a DOM element wrapper, but can be defined by tag attributes. It is worth noting that each child node of the
must have a separate key for the animation to work properly.

How to use

An animation is triggered when the child node is updated.

use

<transition-group tag="ul" name="fade">
    <li v-for="item in count" :key="item">
          {{ item }}
    </li>
</transition-group>
Copy the code

When count increases, Li increases, triggering an animation.

JavaScript hooks

Same as the transition hook.

Matters needing attention

  1. Be sure to define a tag; if not, the animation will not be triggered.

  2. Move-class – Overrides the CSS classes that are applied during the movement transition.

conclusion

  1. Use transitio and transition-group appropriately based on your requirements.

  2. Consider entering and leaving when using them. Of course, you can just define the effect of entering or leaving.

For more articles, the portal has opened: Look back at the Vue3 catalogue!