Animation plays a very important role in project development, and it is also used in many places, such as mouse in and out, popover effect, component show hide, list switch and so on. It can be said that animation is everywhere on our web page. Some people said that these things can also not use animation.
Right, you can not use right, but first you have to convince your product manager I can simple point, don’t make so much virtual to some real, then I guess you guys have to instantly dry up, second, in your web site does not use the animation is not pretend bility, and our web is not vivid, no energy, thus the animation is necessary.
Just kidding, let’s get down to business and see how Vue can make adding animations easier and better.
First, Vue provides different ways to add animations when inserting, modifying, or removing the DOM. In Vue we use
So let’s see what kind of case effect are we trying to achieve
The example in the figure is a very common image switching effect, but in this example we just realized the image switching, it looks very stiff, without any transition effect, let’s add a little animation effect to the picture, so that it looks very compelling.
CSS transition
A component wrapped in < Transition > will generate a different class name for each phase of the component
- V-enter/V-leave: the first frame of the animation
- V-enter-acive/V-leave-active: animation phase where some transition properties are placed, such as time, delay, etc
- V-enter-to/V-leave-to: end of animation, last frame
A picture on the website shows the process in a very friendly way.
V – is the default class name prefix in Vue, so Vue provides a custom naming scheme for < Transition > by adding a name attribute.
Now that we know how, let’s add a simple animation to it.
<template>
<ul class="tabs-list">
<li
v-for="tab in tabs"
:key="tab.id"
:class="{active: tabOn === tab.id}"
>
<a
@mouseover="tabOn = tab.id"
:href="tab.url" target="_blank"
>
{{tab.name}}
<transition name="flip">
<img v-show="tabOn === tab.id" :src="tab.imgUrl">
</transition>
</a>
</li>
</ul>
<template>
<style lang="scss" scoped>
.flip-enter-active {
transition: transform 1s;
}
.flip-leave-active {
transition: transform 1s;
}
.flip-enter,
.flip-leave-to {
transform: scaleY(0);
}
</style>
Copy the code
CSS animations
In contrast to the CSS transitions above, CSS animations use @keyframes to create animations similar to those above.
<style lang="scss"scoped> @keyframes scaleY-in { 0% { transform: scaleY(0); } 50% {transform: scaleY(0.5); } 100% { transform: scaleY(1); } } .flip-enter-active { animation: scaleY-in 1s; } .flip-leave-active { animation: scaleY-in 1s reverse; } </style>Copy the codeUse a third-party animation library
Vue gives us a way to customize CSS class names, which supports integration with third-party animation libraries.
- enter-class / leave-class
- enter-active-class / leave-active-class
- enter-to-class / leave-to-class
The above two animations are all written by ourselves, but sometimes our own handwriting is not perfect, or the project is short of time, it is a good plan to choose a third-party library. We continue with the Animate. CSS animation library to modify our example above.
<transition
name="flip"
enter-active-class="animated rotateIn"
leave-active-class="animated rotateOut"
>
<img v-show="tabOn === tab.id" :src="tab.imgUrl">
</transition>
Copy the code
JavaScript animation
Vue also provides some hook functions that you can use to build animations using JavaScript hook functions.
<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 codeAll hooks pass an EL (element) argument, and the Enter /leave function also passes a done function. It will tell us that our animation is complete, we bound CSS to false, and tell the component to skip CSS detection and use JavaScript.
We use velocity.js animation to modify our animations.
<transition
@enter="enter"
@leave="leave"
:css="false"
>
<img v-show="tabOn === tab.id" :src="tab.imgUrl">
</transition>
<script>
methods: {
enter(el, done) {
Velocity(el, { scaleY: "0" });
Velocity(el, { scaleY: "0.5" }, { duration: 1000 });
Velocity(el, { scaleY: "1" }, { complete: done });
},
leave: function(el, done) {
Velocity(el, { scaleY: "1" });
Velocity(el, { scaleY: "0.5" }, { duration: 1000 });
Velocity(el, { scaleY: "0" }, { complete: done });
}
}
</script>
Copy the codeTransition mode
We’ll look at the example above, no matter what way we use animation, you will find that a problem is that the animation when switching between (enter/leave) was conducted at the same time, there are times when we don’t want to produce this effect, the animation effect is very unfriendly to us, for example, we look at the following example.
<template>
<div class="translate-container" @click="clickHandler">
<transition name="slide">
<img v-if="isShow" src="./feature/03.jpg" key="first">
<img v-else src="./feature/04.jpg" key="second">
</transition>
</div>
</template>
<script>
export default {
methods: {
clickHandler() { this.isShow = ! this.isShow; } } } </script> <style lang="scss"Scoped >.slide-enter-active,.slide-leave-active {transition: all 0.2s; } .slide-leave-to, .slide-enter { transform: scaleY(0); } </style>Copy the code
Obviously, this is a very bad effect, and the good news is that Vue provides us with a solution — transition mode, where we don’t need to add extra code, just modify the features.
Vue provides us with two modes of transition.
- In-out: The new element transitions first, and then the current element transitions away.
- Out-in: The current element transitions first, and then the new element transitions in
Transition mode only works when elements are switched
<transition name="fade" mode="out-in"></transition>
<transition name="fade" mode="in-out"></transition>
Copy the codeLet’s use the transition mode to modify our above example.
<transition name="slide" mode="out-in">
<img v-if="isShow" src="./feature/03.jpg" key="first">
<img v-else src="./feature/04.jpg" key="second">
</transition>
Copy the code
conclusion
Vue gives us a more intuitive and flexible API for adding animations to our projects.
In addition to these single-element animations, Vue also provides
If there are shortcomings in the article, welcome to leave a message to correct, if this article is helpful to you, welcome to forward points like.
