An overview of the
Vue provides a variety of different application transitions when inserting, updating, or removing the DOM. Includes the following tools:
- Automatically apply class to CSS transitions and animations
- You can use third-party CSS animation libraries, such as animation.css
- Use JavaScript to manipulate the DOM directly in transitional hook functions
- You can use a third-party JavaScript animation library, such as velocity.js
In the previous chapter, you learned how to use Animate. CSS, a third-party CSS library, to set animation effects. In this section, you’ll see how to use hook functions.
So why specifically use a JavaScript hook method when the previous method can be animated? This is mainly because there is no way to animate an entry and exit step separately.
For example: set only entrance or set only exit animation. For this kind of animation, the application scenario, such as adding a shopping cart, cannot be set according to the previous CSS method.
Here is a look at the use of the official website.
JavaScript hook functions
You can declare JavaScript hooks in properties
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<! -... -->
</transition>
Copy the codeAs you can see, v-ON is used to bind multiple hook functions in the animation process. The specific animation effects can be written in the corresponding hook functions.
// ...
methods: {
// --------
/ / to enter
// --------
beforeEnter: function (el) {
// ...
},
// When combined with CSS
The done callback is optional
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
/ / when they leave
// --------
beforeLeave: function (el) {
// ...
},
// When combined with CSS
The done callback is optional
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled is used only in V-show
leaveCancelled: function (el) {
// ...}}Copy the codeThese hook functions can be used in conjunction with CSS Transitions /animations or separately.
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.
It is recommended to add V-bind: CSS =”false” for elements that use JavaScript transitions only. Vue skips CSS detection. This also avoids the impact of CSS during the transition.
A simple example using velocity.js:
<! -- Velocity and jquery.animate work in a similar way, It's also a great choice for implementing JavaScript animations --> <script SRC = "https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js" > < / script > < div id = "example - 4" > < button @click="show = ! show"> Toggle </button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false" > <p v-if="show"> Demo </p> </transition> </div>Copy the codenew Vue({
el: '#example-4'.data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1.fontSize: '1.4 em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px'.rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg'.translateY: '30px'.translateX: '30px'.opacity: 0
}, { complete: done })
}
}
})
Copy the codeLet’s use the hook function to animate a moving half.
Implement a small ball half-court animation using JavaScript hook functions
1. First write a click button “shopping”, and then a red ball to show the effect of shopping
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<! Import vue. Js library -->
<script src="lib/vue.js"></script>
<! Write the display style of the ball -->
<style>
#boll{
margin-top: 10px;
width: 15px;
height: 15px;
border-radius: 50%;
background: lightpink;
}
</style>
</head>
<body>
<div id="app">
<! -- Execute the toggle show variable using the v-ON binding click event to control the v-if of the following p tag -->
<button @click="show = ! show">Add to shopping cart</button>
<! -- Set animation ball -->
<transition>
<div v-if="show" id="boll"></div>
</transition>
</div>
<script>
// 2\. Create an instance of Vue
var vm = new Vue({
el: '#app',
data: {
show: true}})</script>
</body>
</html>
Copy the codeThe browser view is as follows:
2. Usev-onSets the hook function that enters the variable
3. Print the corresponding hook information in the corresponding hook function to view the execution status of the hook
Check in the browser, click the button, when switching v-if display ball, the corresponding hook function will be executed, which hook function. As follows:
4. In the corresponding hook function, write the ball animation JS code
The el.offsetWidth in the Enter hook function is important. If you don’t write the el.offsetWidth, you won’t be able to animate it.
The effect is as follows:
So far the ball has been implemented by clicking through the shopping cart, triggering the V-if to display the animation effect of admission.
Complete sample code
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<! Import vue. Js library -->
<script src="lib/vue.js"></script>
<! Write the display style of the ball -->
<style>
#boll{
margin-top: 10px;
width: 15px;
height: 15px;
border-radius: 50%;
background: lightpink;
}
</style>
</head>
<body>
<div id="app">
<! -- Execute the toggle show variable using the v-ON binding click event to control the v-if of the following p tag -->
<button @click="show = ! show">Add to shopping cart</button>
<! -- Set animation ball -->
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
>
<div v-if="show" id="boll"></div>
</transition>
</div>
<script>
// 2\. Create an instance of Vue
var vm = new Vue({
el: '#app'.data: {
show: true
},
methods: {// --------
/ / to enter
// --------
beforeEnter: function (el) {
// Start preparing to enter animation state
console.log("Execute the beforeEnter hook function in enter animation");
// Set the starting position of the ball before it starts animation
el.style.transform = "translate(0, 0)";
},
// When combined with CSS
The done callback is optional
enter: function (el, done) {
// It has entered the animation state to set the animation effect
console.log("Execute enter hook function in enter animation");
// This sentence has no actual effect, but if you don't write it, you can't animate it;
// It can be assumed that el.offsetwidth forces animation refresh
el.offsetWidth;
// Enter represents the style after the animation has started. Here, you can set the end state of the ball after the animation has finished
el.style.transform = "translate(150px, 450px)";
el.style.transition = 'all 1s ease';
// Use the done method to call back afterEnter
done()
},
afterEnter: function (el) {
// After entering the animation state, perform the end restore operation
console.log("Execute the afterEnter hook function to enter the animation");
// After executing the animation, hide the ball again
this.show = !this.show
},
enterCancelled: function (el) {
// Execute when unanimating
console.log("Execute enterCancelled hook function into animation"); }}})</script>
</body>
</html>
Copy the code