How to use Vue to implement CSS transitions and animations

1. The difference between transition and animation
2. Use Vue to implement basic CSS transitions and animations

1. Animation
2. Transition

3. Use the transition tag to achieve transition and animation effects of single elements/components

1. Basic introduction to transition
2. Transition class of transition
3. Transition Example
4. Animation Examples
5. The name attribute of transition
6. Customize transition class names
7. Set up transitions and animations at the same time
8. duration property
9. Use js to implement animation

4. Implementation of component and element switching animation

5. List Animation

6. State Animation

Summarize

1. The difference between transition and animation

Transition: Usually used to indicate a change in the state of an attribute on an element.

Animation: Usually used to show the movement of elements.

2. Use Vue to implement basic CSS transitions and animations

1. Animation

/* css */
@keyframes leftToRight {
    0% {
        transform: translateX(-100px);
    }
    50% {
        transform: translateX(-50px);
    }
    100% {
        transform: translateX(0);
    }
}
.animation {
    animation: leftToRight 3s;
}

// js
const app = Vue.createApp({
    data() {
        return {
            animate:
                animation: true
            }
        }
    },
    methods: {
        handleClick(){
            this.animate.animation = !this.animate.animation
        }
    },
    template: `
        <div :class='animate'>hello</div>
        <button @click='handleClick'>Switch</button>
    `
});

2. Transition

/* css */
.transition {
    transition: background-color 3s linear 0s;
}
 
.gold {
    background-color: gold;
}
 
.cyan {
    background-color: cyan;
}

// js
const app = Vue.createApp({
    data() {
        return {
            animate:
                transition: true,
                gold: true,
                cyan: false
            }
        }
    },
    methods: {
        handleClick() {
            this.animate.gold = !this.animate.gold;
            this.animate.cyan = !this.animate.cyan;
        }
    },
    template: `
        <div :class='animate'>hello</div>
        <button @click='handleClick'>Switch</button>
    `
});

The above is achieved by setting the class attribute, and it can also be achieved by setting the style attribute:

/* css */
.transition {
    transition: background-color 3s linear 0s;
}

// js
data() {
    return {
        transition: 'transition',
        styleObject: {
            backgroundColor: 'gold'
        }
    }
},
methods: {
    handleClick() {
        if(this.styleObject.backgroundColor === 'gold'){
            this.styleObject.backgroundColor = 'cyan';
        }else{
            this.styleObject.backgroundColor = 'gold';
        }
    }
},
template: `
    <div :class='transition' :style='styleObject'>hello</div>
    <button @click='handleClick'>Switch</button>
`

3. Use the transition tag to achieve transition and animation effects of single elements/components

1. Basic introduction to transition

The <transition> element acts as a transition effect for a single element/component.
<transition> only applies the transition effect to its wrapped content , without rendering additional DOM elements or appearing in the inspectable component hierarchy .

2. Transition class of transition

During the enter/leave transition, there are 6 classes switching:

v-enter-from : Defines the starting state of the enter transition. Takes effect before the element is inserted and is removed in the next frame after the element is inserted.
v-enter-active: Defines the state when the enter transition is in effect. Applied during the entire entry transition phase, before the element is inserted, and removed after the transition/animation is complete. This class can be used to define entry transition timing, delays and curve functions.
v-enter-to: Defines the end state of the enter transition. Takes effect one frame after the element is inserted (at the same time v-enter-from is removed), and is removed after the transition/animation is complete.
v-leave-from : Defines the starting state of a leaving transition. Takes effect immediately when a leaving transition is triggered, and is removed on the next frame.
v-leave-active: Defines the state when the leave transition is in effect. Applied during the entire leaving transition phase, takes effect immediately when the leaving transition is triggered, and removed after the transition/animation is completed. This class can be used to define the duration, delay and curve function of the leaving transition.
v-leave-to: The end state of the leaving transition. Takes effect one frame after the leaving transition is triggered (at the same time v-leave-from is removed), and is removed after the transition/animation is complete.

3. Transition Example

Wrap the elements that need transition with the transition tag. Set the class required for transition. You can choose from the above six classes.

/* css */
/* .v-enter-from {
    opacity: 0;
}
.v-enter-active {
    transition: opacity 1s ease;
}
.v-enter-to {
    opacity: 1;
}
.v-leave-from {
    opacity: 1;
}
.v-leave-active {
    transition: opacity 1s ease;
}
.v-leave-to {
    opacity: 0;
} */
/* Abbreviation */
.v-enter-from, .v-leave-to{
    opacity: 0;
}
.v-enter-active, .v-leave-active{
    transition: opacity 1s ease;
}

// js
const app = Vue.createApp({
    data() {
        return {
            show: true
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        }
    },
    template: `
        <transition>
            <div v-if='show'>hello</div>
        </transition>
        <button @click='handleClick'>Switch</button>
    `
});

4. Animation Examples

To use the animation effect, you only need to modify the CSS part, and the JS part remains unchanged.

/* css */
@keyframes shake-in {
    0% {
        transform: translateX(-50px);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0px);
    }
}
@keyframes shake-out {
    0% {
        transform: translateX(50px);
    }
    50% {
        transform: translateX(-50px);
    }
    100% {
        transform: translateX(0px);
    }
}
.v-enter-active{
    animation: shake-in 1s ease-in;
}
.v-leave-active{
    animation: shake-out 1s ease-in-out;
}

5. The name attribute of transition

name - string: used to automatically generate CSS transition class name. If not specified, the default value is v.
If name is set to hy, the corresponding class name should also be changed to start with hy.

// js
<transition name='hy'>
    <div v-if='show'>hello</div>
</transition>

/* css */
.hy-enter-from, .hy-leave-to{
    opacity: 0;
}
.hy-enter-active, .hy-leave-active{
    transition: opacity 1s ease;
}

6. Customize transition class names

We can customize the transition class name through the following attribute:

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

They have higher precedence than normal class names, which is useful for combining Vue's transition system with other third-party CSS animation libraries such as Animate.css.

// First import the style sheet <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="external nofollow" />
 
const app = Vue.createApp({
    data() {
        return {
            show: true
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        }
    },
    // Add animation style template by customizing the transition class name: `
        <transition name='hy' 
        enter-active-class='animate__animated animate__bounce'
        leave-active-class='animate__animated animate__bounce'>
            <div v-if='show'>hello</div>
        </transition>
        <button @click='handleClick'>Switch</button>
    `
});

7. Set up transitions and animations at the same time

In some scenarios, you need to set transition and animation for the same element at the same time, for example, the animation is triggered and completed quickly, but the transition effect has not yet ended.
In this case, you need to use the type attribute and set the animation or transition to explicitly declare the type you want Vue to listen to.
type - string. Specify the transition event type and listen for when the transition ends. Valid values are "transition" and "animation". By default Vue.js will automatically detect long duration events as transition events.

When the transition time is longer, the effect of using type='transiton' is:

It can be found that the animation is completed first, but the transition is not terminated and will be executed completely before the element disappears.

/* css */
@keyframes shake-in {
    0% {
        transform: translateX(-50px);
    }
 
    50% {
        transform: translateX(50px);
    }
 
    100% {
        transform: translateX(0px);
    }
}
 
@keyframes shake-out {
    0% {
        transform: translateX(50px);
    }
 
    50% {
        transform: translateX(-50px);
    }
 
    100% {
        transform: translateX(0px);
    }
}
 
.v-enter-from,
.v-leave-to {
    color: red;
}
 
.v-enter-active {
    animation: shake-in 1s ease-in;
    transition: color 3s ease-in;
}
 
.v-enter-to, .v-leave-from {
    color: green;
}
 
.v-leave-active {
    animation: shake-out 1s ease-in-out;
    transition: color 3s ease-in-out;
}

// js
const app = Vue.createApp({
    data() {
        return {
            show: true
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        }
    },
    template: `
        <transition type='transition'>
            <div v-if='show'>hello</div>
        </transition>
        <button @click='handleClick'>Switch</button>
    `
});

When the transition time is longer, use type='animation ':

You can find that after the animation is completed, the transition will terminate immediately and the element will disappear.

<transition type='animation'>
    <div v-if='show'>hello</div>
</transition>

8. duration property

duration - number | { enter: number, leave: number }: Specifies the duration of the transition.
It has a higher priority than the time set in CSS.
The unit is: ms.

<transition :duration='100' >
    <div v-if='show'>hello</div>
</transition >

You can also customize the duration of entry and exit:

<transition :duration='{ enter: 1000, leave: 3000 }' >
    <div v-if='show'>hello</div>
</transition >

9. Use js to implement animation

When transitioning with JavaScript only, you must use the done callback in the enter and leave hooks. Otherwise, they are called synchronously and the transition completes immediately.
Adding :css="false" will also make Vue skip CSS detection. In addition to slightly higher performance, this can avoid the impact of CSS rules during the transition process.

To implement animation with js, you can declare JavaScript hooks in the transition attribute:

@before-enter="beforeEnter"	Before transition
@enter="enter"	When entering transition
@after-enter="afterEnter"	After entering the transition
@enter-cancelled="enterCancelled"	When the entry transition is interrupted
@before-leave="beforeLeave"	Before leaving transition
@leave="leave"	When leaving transition
@after-leave="afterLeave"	After leaving transition
@leave-cancelled="leaveCancelled"	When the leaving transition is interrupted

const app = Vue.createApp({
    data() {
        return {
            show: true
        }
    },
    methods: {
        handleClick() {
            this.show = !this.show;
        },
        handleBeforeEnter(el){
            el.style.color = 'red';
        },
        handleEnter(el, done){
            const timer = setInterval(()=>{
                if(el.style.color === 'red'){
                    el.style.color = 'blue';
                }else{
                    el.style.color = 'red';
                }
            }, 1000);
            setTimeout(()=>{
                clearInterval(timer);
                // Animation end mark // If done() is not executed, handleAfterEnter will not execute done();
            }, 3000)
        },
        handleAfterEnter(el){
            console.log('success');
        }
    },
    template: `
        <transition :css='false'
        @before-enter='handleBeforeEnter'
        @enter='handleEnter'
        @after-enter='handleAfterEnter'
        >
            <div v-if='show'>hello</div>
        </transition>
        <button @click='handleClick'>Switch</button>
    `
});

// js
const app = Vue.createApp({
    components: ['item-a', 'item-b'],
    data() {
        return {
            component: 'item-a'
        }
    },
    methods: {
        handleClick() {
            if (this.component === 'item-a') {
                this.component = 'item-b';
            } else {
                this.component = 'item-a';
            }
        }
    },
    template: `
        <transition mode='out-in' appear>
            <component :is='component' />
        </transition>
        <button @click='handleClick'>Switch</button>
    `
});
app.component('item-a', {
    template: `<div>hello</div>`
});
app.component('item-b', {
    template: `<div>bye</div>`
});

4. Implementation of component and element switching animation

mode - string Controls the timing of the leaving/entering transitions.
Valid modes are "out-in" and "in-out"; the default is simultaneous.
You can set the node's initial rendering transition via the appear attribute.

/* css */
.v-enter-from,
.v-leave-to {
    opacity: 0;
}
 
.v-enter-active,
.v-leave-active {
    transition: opacity 1s ease-in;
}
 
.v-enter-to,
.v-leave-from {
    opacity: 1;
}

// js
const app = Vue.createApp({
    components: ['item-a', 'item-b'],
    data() {
        return {
            component: 'item-a'
        }
    },
    methods: {
        handleClick() {
            if (this.component === 'item-a') {
                this.component = 'item-b';
            } else {
                this.component = 'item-a';
            }
        }
    },
    template: `
        <transition mode='out-in' appear>
            <component :is='component' />
        </transition>
        <button @click='handleClick'>Switch</button>
    `
});
app.component('item-a', {
    template: `<div>hello</div>`
});
app.component('item-b', {
    template: `<div>bye</div>`
});

5. List Animation

Using the <transition-group> component, the entire list can be rendered at the same time.
Inner elements are always required to provide a unique key attribute value.
CSS transition classes will be applied to the inner elements, not to the group/container itself.
The <transition-group> component has another special feature. Not only can you animate entering and leaving, but you can also change positioning. To use this new functionality just use the newly added v-move class.

/* css */
.inline-block {
    display: inline-block;
    margin-right: 10px;
}
 
.v-enter-from,
.v-leave-to {
    opacity: 0;
    transform: translateY(30px);
}
 
.v-enter-active {
    transition: all 1s ease;
}
 
.v-leave-active {
    position: absolute;
}
 
.v-move {
    transition: all 1s ease;
}

6. State Animation

For the data elements themselves, animation effects can also be achieved through changes in numbers and operations, color display, SVG node position, element size and other properties .

Example of number changes :

const app = Vue.createApp({
    data() {
        return {
            number: 1
        }
    },
    methods: {
        handleClick() {
            const timer = setInterval(() => {
                if (this.number >= 10) {
                    clearInterval(timer)
                }else{
                    this.number++;
                }
            }, 100);
        }
    },
    template: `
        <div>{{number}}</div>
        <button @click='handleClick'>Add</button>
    `
});

Summarize

This is the end of this article on how to use Vue to implement CSS transitions and animations. For more relevant content about Vue to implement CSS transitions and animations, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

About the pitfall record of Vue3 transition animation
Vue implements transition animation of list scrolling
Vue solves the problem of routing transition animation jitter (detailed example)
Solve the problem that vue's transition animation cannot be implemented normally
Detailed explanation of vue3 transition animation

<<: How to deploy code-server using docker

>>: HTML sets bold, italic, underline, strikethrough and other font effects