This is the 8 days I participated in the November Gwen Challenge. See the details of the event: the last Gwen Challenge 2021

An overview of the

In Vue, we can do transitions and animations in a variety of ways, including class and style and
tags for transitions between single elements/components and multiple elements/components. List transitions are made through the
tag and state transitions are made through the responsiveness and component systems of the Vue.

Class-based transitions and animations

/ * * / animation
@keyframes leftToRight {
    0% {
        transform: translateX(-100px);
    }

    50% {
        transform: translateX(-50px);
    }

    0% {
        transform: translateX(0px); }}.animation {
    animation: leftToRight 3s;
}

/ * * /
.transition {
    transition: 3s background-color ease;
}

.yellow {
    background-color: yellow;
}

.skyblue {
    background-color: skyblue;
}
Copy the code
const app = Vue.createApp({
    data() {
        return {
            animation: {
                animation: true
            },
            transition: {
                transition: true.skyblue: true.yellow: false}}},methods: {
        handleClickAnimation() {
            this.animation.animation = !this.animation.animation
        },
        handleClickTransition() {
            this.transition.skyblue = !this.transition.skyblue;
            this.transition.yellow = !this.transition.yellow; }},template:/*html*/ ` 
      

       Hello Animarion
      
  
      

       Hello Transiton
      
  `
})
const vm = app.mount("#root")
Copy the code

Control by style

const app = Vue.createApp({
    data() {
        return {
            styleObj: {
                background: 'skyblue'}}},methods: {
        handleClick() {
            this.styleObj.background === 'skyblue' ?
                this.styleObj.background = 'yellow' :
                this.styleObj.background = 'skyblue'}},template:/*html*/ ` 
      

       Hello Transiton
      
  `
})
Copy the code

Enter/leave transition

Vue provides a variety of ways to apply transformation effects when inserting, updating, and removing the DOM.

Single element/component transitions

CSS transition

Control the transition of an element, a single element, through the
tag. Element from the display state to hidden state is the entrance, the element from the display state to hidden state is the entrance. The following example uses v-if to control the rendering of elements, and v-show to control the presentation of elements:

const app = Vue.createApp({
    data() {
        return {
            show: false}},methods: {
        handleClick() {
            this.show = !this.show
        }
    },
    template:/*html*/` 
       
       

        Hello World
       
 
        `
})
Copy the code

Then we need to add some styles.

The transition class

V-enter-from is the entry state of the element and is removed in the next frame after the element is inserted. V-enter-to-is the end state of entry, which is removed after the transition/animation is completed; V-enter-active Defines the state entered into effect and removed after the transition/animation is complete:

.v-enter-from {
    opacity: 0;
}

.v-enter-active {
    transition: opacity 3s ease-out;
}

.v-enter-to {
    opacity: 1;
}
Copy the code

The exit process also has three class switches, namely V-leave-from, V-leave-Active and V-leave-to.

The diagram above illustrates the life cycle of each class.

V – is the default prefix for class names that are switched in transition if you use an unnamed
. If you use
then v-enter-from will be replaced with my-transition-enter-from.

CSS animations

CSS animations are used to transition to CSS using the
tag. The difference is that in the animation the V-Enter-from class name is not deleted immediately after the node inserts the DOM, but when the AnimationEnd event is triggered.

.v-enter-active {
  animation: bounce-in 0.5 s;
}
.v-leave-active {
  animation: bounce-in 0.5 s reverse;
}
@keyframes bounce-in {
	/ *... * /
}
Copy the code

Custom animation class name

You can customize the class name by using the following attributes: enter-from-class, enter-active-class, enter-to-class, leave-from-class, leave-active-class, and leave-to-class.

This enables the use of third-party animation libraries.

Use both transitions and animations

When both transitions and animations are used, the type attribute of the
tag can be set to the time of either animation or transition, and the values can be Transition and animation.

.v-enter-active {
    transition: opacity 3s ease-out;
    animation: bounce-in 5s reverse;
}
Copy the code
<transition type='transiton'>.</transition>
Copy the code

In the example above, both the transition and animation end after 3 seconds.

Duration of dominant transition

We can also use duration to set an explicit transition duration in milliseconds, after which the transition and animation ends:

<transition :duration='1000'>.</transition>
Copy the code

You can also customize the duration of entry and removal:

<transition :duration="{ enter: 500, leave: 800 }">.</transition>
Copy the code

JavaScript hooks

Instead of using CSS transitions and animations, we can use JS transitions and animations.

Use: CSS =’false’ to skip CSS detection and use JavaScript hooks to define animation effects.

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  :css="false"
>
  <! -... -->
</transition>
Copy the code
methods: {
  beforeEnter(el) {
    el.style.color='red'
  },
  The done callback is optional when used with CSS
  enter(el, done) {
    done() // Indicates that the enter function is complete
  },
  // Enter afterEnter is executed only after the execution is complete
  afterEnter(el) {
    // ...
  },
  enterCancelled(el) {
    // ...
  }
	// ...
}
Copy the code

Transition from initial rendering

You can use the appear attribute to set the transition of the node in the initial rendering:

<transition appear>
  <! -... -->
</transition>
Copy the code

Transitions between multiple elements

We can switch between elements by v-if, V-else, v-else-if. By default, the
element enters and leaves at the same time, resulting in two elements at the same time.

A simultaneous entry and exit transition does not satisfy all requirements, so Vue provides a transition mode

  • in-out: The new element transitions first, then the current element transitions away.
  • out-in: The current element transitions first, and then the new element transitions in.
<transition mode='out-in'>
	<div v-if='show'>Hello World</div>
	<div v-else>Bye World</div>
</transition>
<button @click='handleClick'>change</button>
Copy the code

Transitions between multiple components

In addition to using V-if and V-show in components, we can also use dynamic components to control component switching.

List the transition

So far we have only talked about the animation effects of one element or multiple elements. Now, multielement animation.

List entry/exit transitions

We can render the entire list with
.

const app = Vue.createApp({
    data() {
        return {
            list: [1.2.3]}},methods: {
        handleClick() {
            this.list.unshift(this.list.length + 1)}},template:/*html*/ ` 
       
       {{item}} 
        `
})
Copy the code
.list-item {
    display: inline-block;
    margin-right: 10px;
}

.v-enter-from {
    opacity: 0;
    transform: translateY(30px);
}

.v-enter-active {
    transition: all 2s ease;
}
Copy the code

Each item in the list here needs to provide a unique key value, otherwise the animation will not work.

There was a problem. Every time you added an element to the list, the surrounding elements teleported to their location.

List transitions

To solve the problem just mentioned, we can use the V-Move class to apply the element change process.

.v-move {
    transition: all .5s ease-in
}
Copy the code

State transition

When the data itself changes, we can leverage the responsiveness of the Vue and the component system to achieve state transitions.

Here’s an example:

const app = Vue.createApp({
    data() {
        return {
            number: 1.animateNumber: 1}},methods: {
        handleClick() {
            this.number = 10;
            if (this.animateNumber < this.number) {
                const animation = setInterval(() = > {
                    this.animateNumber += 1
                    if (this.animateNumber === 10) {
                        clearInterval(animation)
                    }
                }, 100)}}},template:/*html*/ ` 
      

       {{animateNumber}}
      
  `
})
Copy the code

When the button is clicked, the number increases one by one to 10, which is displayed as an animation.