[Vue] transition makes your v-if and v-show have a beautiful transition and animation

Blog description

Part of the information involved in the article comes from the Internet. Of course, there are my own personal summaries and opinions. The purpose of sharing is to build a community and consolidate myself. If there is infringement on the cited materials, please contact me to delete! Luckily I'm here. Thank you for coming!

explain

The product says: you should not display it when it is displayed, but it suddenly disappears. Will users think it is a Bug?

Bug: ？？？

In fact, this is the most commonly used v-if and v-show instructions in vue.

The rigid business scenario switching gives the illusion that the product can be optimized

Then let's optimize it again! Add an animation?

Transition animation

Of course, first look at the official website, address

Animation case

It is mainly a text gradient process animation.

code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Transition animation</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>

.fade-enter-active, .fade-leave-active {
    transition: opacity 2s
}
.fade-enter-to, .fade-leave-to {
    opacity: 0
}
</style>
</head>
<body>
<div id="container">
	<button v-on:click="show = !show">Point me</button>
	<transition name="fade" appear="true">
    <p v-show="show" v-bind:style="styleText">Look at me</p>
	</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#container',
    data: {
        show: true,
        styleText :{
            styleText: '30px',
            color: 'red'
        }
    },
    methods : {
    }
});
</script>
</body>
</html>

effect

Animation parameters

Note that v replaces our name attribute in transition

for example

<transition name="plus">
   <div>hello</div>
</transition>

// css
.plus-enter {
	background: red;
}

parameter list

v-enter: defines the start state of the transition. Takes effect before the element is inserted and is removed at the next frame after the element is inserted.
v-enter-active: defines the state when the transition becomes effective. Applied throughout the transition phase, it takes effect before the element is inserted and removed after the transition / animation is completed. This class can be used to define the transition process time, delay and curve functions.
V-enter-to: version 2.1.8 and above define the end state of transition. After the element is inserted, the next frame takes effect (at the same time, the v-enter is removed) and is removed after the transition / animation is completed.
v-leave: defines the start state of leaving the transition. Takes effect immediately when the exit transition is triggered and the next frame is removed.
v-leave-active: defines the state when the exit transition takes effect. Applied throughout the exit transition phase, it takes effect immediately when the exit transition is triggered and is removed after the transition / animation is completed. This class can be used to define exit transition process time, delay and curve functions.
V-leave-to: version 2.1.8 and above define the end state of leaving the transition. After the departure transition is triggered, the next frame takes effect (at the same time, v-leave is deleted) and is removed after the transition / animation is completed.

Then I found that nine class es were written in the official document

Then send out the missing ones. The following three are not used much. If you have small partners to use, you can try ha!

V-appearance: defines the start state at the initial rendering.
v-appear-active: defines the state of the initial rendering. This class can be used to define the transition process time, delay and curve functions.
v-appear-to: defines the end state of the initial rendering.

Matching animation library

The animation effect written by yourself is difficult and free. It's not as good as the animation library written by others. Can you be lazy?

Yes!

Two excellent animation Libraries

It can be used with animation libraries. Two animation libraries are recommended CSS and vivivify css

animate.css

vivify.css

The above are two animation libraries. If you are interested, you can go and have a look

Use by custom class

animate.css animation library

<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
>
    <p v-if="show">Nice</p>
</transition>

Use directly through animation

Use animation effects in animation through animation parameters.

<transition name="fade-box">
   <div v-show="show" class="box"></div>
</transition>

// css
.fade-box-leave-to {
 animation: bounceOutRight 0.8s;
}

event hook 🪝

JavaScript hook

before-enter
before-leave
before-appear
enter
leave
appear
after-enter
after-leave
after-appear
enter-cancelled
leave-cancelled (v-show only)
appear-cancelled

When only JavaScript is used for transition, do must be used for callback in enter and leave. Otherwise, they will be called synchronously and the transition will be completed immediately.

case

<transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
  >
    <p v-if="show">hello</p>
</transition>


// javascript
beforeEnter: function (el) {
  console.log(el)
},

enter: function (el, done) {
  console.log(el)
	done()
},

Summary

Vue's v-if and v-show still have a lot of playability. Have we made good use of the transition component in our code? Can it help the business?

thank

Universal network

Rookie tutorial

And hard-working themselves, Personal blog，GitHub learning，GitHub

The official account is small.

If you feel helpful to you, you might as well praise me 👍 Let's keep paying attention!

Keywords: css3 Vue Vue.js

Added by dtasman7 on Wed, 05 Jan 2022 22:09:10 +0200

Programming VIP

[Vue] transition makes your v-if and v-show have a beautiful transition and animation