【Vue】 Transition lets your V-If and V-show have a nice transition and animation

The blog instructions

Part of the information involved in this article comes from the Internet, as well as my own summary and views. The purpose of sharing is to build the community and consolidate myself. If the information cited infringement, please contact me to delete! Thank god I was here. Thank you for coming!

instructions

The product says: you are asked to display this and this, but do not display that, but suddenly no, so users will not think this is a Bug?

Bug:??

In fact, this is the v-if and V-show instructions we use most commonly in VUE.

Rigid business scene switch, so that the product feel can also be optimized illusion

So optimize it again! Add an animation?

Transition animations

Of course, first look at the official website, address

Animation case

Mainly a text gradient process animation.

code

<! DOCTYPEhtml>
<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">Am I</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>
Copy the code

The effect

Animation parameters

Notice that v is replacing our name property in transition

For example,

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

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

The list of parameters

v-enter: Defines the state at the beginning of the transition. It takes effect before the element is inserted and is removed the next frame after the element is inserted.
v-enter-active: Defines the state when the transition takes effect. Applied throughout the transition phase, before the element is inserted and removed after the transition/animation is complete. This class can be used to define the process time, delay, and curve functions that enter the transition.
v-enter-to: 2.1.8 and aboveDefine the end state of the transition. The next frame takes effect after the element is inserted (at the same timev-enterRemoved) after the transition/animation is complete.
v-leave: Defines the beginning state of the exit transition. Immediately after the exit transition is triggered, the next frame is removed.
v-leave-active: Defines the state when the exit transition takes effect. Applies throughout the exit transition phase, takes effect immediately when the exit transition is triggered, and removes after the transition/animation is complete. This class can be used to define exit transition process time, delay and curve functions.
v-leave-to: 2.1.8 and aboveDefine the end state of the exit transition. The next frame takes effect after the exit transition is triggered (at the same timev-leaveRemoved) after the transition/animation is complete.

Then I found that there are nine classes listed in the official documentation

So the lack of also sent out, the following three use not much, have to use small partners can try ha!

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

Coordinate animation library

Their own handwriting animation effect is hard to avoid, as others write animation library, so can steal a lazy?

Can!!!!

Two excellent animation libraries

Animate. CSS and Vivify.css are recommended

animate.css

vivify.css

Above is two animation library, we are interested in can go to see

Use by custom class

Animate. CSS in combination with the animate library

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

Use directly through animation

Use the animation effects in the animation with the animation parameters.

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

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

Event hooks 🪝

JavaScript hooks

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 transitioning only with JavaScript, you must use done for callbacks in enter and leave. Otherwise, they will be called synchronously and the transition will complete 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()
},
Copy the code

summary

Vue’s V-IF and V-show components also have a lot of playability, and the transition component is used properly in our code. Will it help the business?

Thank you

Universal network

Novice tutorial

And hard-working self, personal blog, GitHub learning, GitHub

Public number [to child mo], small program [small to blog]

If you feel helpful to you, might as well give me a thumbs up 👍, continue to pay attention to ha!

【Vue】 Transition lets your V-If and V-show have a nice transition and animation