Vue.js the transition and animation _javascript skills you must learn every day

The transition effect can be applied automatically when an element is inserted or removed from the DOM through a vue.js transition system. Vue.js will trigger CSS transitions or animations for you at the right time, and you can also provide the corresponding JavaScript hook function to perform custom DOM operations during the transition process.

To apply a transition effect, you need to use the transition attribute on the target element:

<div v-if= "Show" transition= "My-transition" ></div>

The transition attribute can be used with the following resources:
v-if
V-show
v-for (triggered only on insert and delete, use Vue-animated-list plugin)
• Dynamic components (introduction see components)
• On the root node of the component and is triggered by the Vue instance DOM method (such as VM. $appendTo (EL)).

When you insert or delete an element with a transition, Vue will:
1. Try to find the JavaScript transition Hook object with the id "my-transition"-registered by Vue.transition (ID, hooks) or transitions option. If found, the corresponding hooks will be invoked at different stages of the transition.

2. Automatically sniff the target element for CSS transitions or animations, and Add/Remove CSS class names when appropriate.

3. If no JavaScript hooks are found and CSS transitions/animations are not detected, DOM operations (insert/delete) are executed immediately in the next frame.

CSS transitions

Example

A typical CSS transition looks like this:

<div v-if= "Show" transition= "expand" >hello</div>
then add CSS rules for '. Expand-transition ', '. Expand-enter ' and '. Expand-leave ':

/* Must
/* expand-transition {
 transition:all 3s ease;
 height:30px;
 padding:10px;
 Background-color: #eee;
 Overflow:hidden;
}

/*. expand-enter defines the starting state of entry////
* Expand-leave defines the end state of departure/*
Expand-enter,. expand-leave {
 height:0;< c13/>padding:0 10px;
 opacity:0;
}

You can implement different transitions through dynamic binding on the same element:
<div v-if= "show": transition= "Transitionname" >hello</div>

New Vue ({
 el: ' ... ',
 data: {
 show:false,
 transitionname: ' Fade '
 }
})

In addition, you can provide JavaScript hooks:

Vue.transition (' expand ', {

 beforeenter:function (EL) {
 el.textcontent = ' Beforeenter '
 },
 enter: Function (EL) {
 el.textcontent = ' Enter '
 },
 afterenter:function (EL) {
 el.textcontent = ' Afterenter ' c9/>},
 entercancelled:function (EL) {
 //handle cancellation
 },

 beforeleave:function (EL) {
 el.textcontent = ' Beforeleave '
 },
 leave:function (EL) {
 el.textcontent = ' Leave '
 },
 Afterleave:function (EL) {
 el.textcontent = ' Afterleave '
 },
 leavecancelled:function (EL) {
 // Handle cancellation
 }
})

Transition CSS class Name

The addition and switching of class names depends on the value of the transition attribute. For example transition= "fade", there will be three CSS class names:
1..fade-transition always remain on the element.

2..fade-enter defines the starting state of the transition. Apply only one frame and delete it immediately.

3..fade-leave defines the end state of a transition from the left. Takes effect at the beginning of the transition and deletes after it is finished.

If the transition attribute has no value, the class name defaults to. v-transition,. V-enter and. V-leave.

Custom transition class Name

1.0.14 New
We can declare a custom CSS transition class name in the transition JavaScript definition. These custom class names override the default class name. It is useful when you need to work with a third party CSS Animation library, such as ANIMATE.CSS:

<div v-show= "OK" class= "animated" transition= "Bounce" >watch me bounce</div>

Vue.transition (' Bounce ', {
 enterclass: ' Bounceinleft ',
 leaveclass: ' Bounceoutright '
})

Explicitly declaring a CSS transition type

1.0.14 New

Vue.js needs to add an event listener to the transition element to listen for when the transition ends. Based on the CSS used, the event is either Transitionend or Animationend. If you use only one of the two, then Vue.js will be able to automatically infer the corresponding event type according to the CSS rules in effect. However, in some cases an element may need to have two types of animations at the same time. For example, you might want Vue to trigger a CSS animation, while the element has a CSS transition effect when the mouse hovers. In this case, you need to explicitly declare the type of animation you want Vue to handle (animation or transition):

Vue.transition (' Bounce ', {
 //The transition effect will only listen for ' animationend ' event
 type: ' Animation '
})

Transition process Detailed

When the show property changes, Vue.js inserts or deletes the <div> element accordingly, changing the CSS class name of the transition according to the following rules:
• If show becomes false,vue.js will:
1. Call Beforeleave Hook;
2. Add the V-leave class name to the element to trigger the transition;
3. Call leave hook;
4. Wait for the transition to end (monitor transitionend events);
5. Remove the element from the DOM and delete the V-leave class name;
6. Call the Afterleave hook.

• If show becomes true,vue.js will:
1. Call Beforeenter Hook;
2. Add the V-enter class name to the element;
3. Insert it into the DOM;
4. Call Enter hook;
5. Force a CSS layout, so that v-enter really effective. Then delete the V-enter class name to trigger the transition and return to the original state of the element;
6. Awaiting the end of the transition;
7. Call the Afterenter hook.

In addition, if the element is deleted while its entry transition is still in progress, the entercancelled hook is invoked to clean up the changes or enter the timer created. In turn, the transition to departure is also the case.

When all of the hook functions above are invoked, their this point points to the Vue instance to which they belong. Compilation rule: in which context the transition is compiled, and this is the context to which this is directed.

Finally, enter and leave can have a second optional callback parameter that explicitly controls how the transition ends. So you don't have to wait for the CSS transitionend event, Vue.js will wait for you to call this callback manually to end the transition. For example:

Enter:function (EL) {
 //No second parameter
 //Transitionend event determines when the transition ends
}

Vs.

Enter:function (el, done) {
 //There is a second parameter
 //transition only when the call to ' do ' ends
}

<p class= "Tip" > when multiple elements are transitioning together, the vue.js is processed in batches, forcing only one layout at a time.

CSS Animation

CSS animation usage is a transition to CSS, except that the V-enter class name in the animation is not deleted immediately after the node is inserted into the DOM, but is deleted when the Animationend event is triggered.

Example: (The compatibility prefix is omitted)

<span v-show= "show" transition= "Bounce" >look at me!</span>

. bounce-transition {
 display: Inline-block; /* Otherwise scale animation does not
work
/}. bounce-enter {
 animation:bounce-in.
5s}
. Bounce-leave {
 animation:bounce-out 5s;
}
@keyframes bounce-in {
 0% {
 transform:scale (0);
 }
 50% {
 Transform:scale (1.5);
 }
 100% {
 Transform:scale (1);
 }
}
@keyframes Bounce-out {
 0% {
 transform:scale (1);
 }
 50% {
 Transform:scale (1.5);
 }
 100% {
 transform:scale (0);
 }
}

JavaScript transitions

You can also use only JavaScript hooks, without defining any CSS rules. When using only JavaScript transitions, the Enter and leave hooks need to invoke the done callback, otherwise they will be called synchronously, and the transition will end immediately.

It's a good idea to explicitly declare css:false for JavaScript transitions, vue.js will skip CSS detection. This will also prevent inadvertently letting CSS rules interfere with transitions.

In the following example, we use JQuery to register a custom JavaScript transition:

Vue.transition (' fade ', {
 css:false,
 enter:function (el, done) {
 //element has been inserted into
 the DOM////After the animation has been called done
 $ ( EL)
  . css (' opacity ', 0)
  . Animate ({opacity:1}, 1000, done)
 },
 entercancelled:function (EL) {
 $ ( EL). Stop ()
 },
 leave:function (el, done) {
 //Same as Enter
 $ (EL). Animate ({opacity:0}, 1000, done) 
   },
 leavecancelled:function (EL) {
 $ (EL). Stop ()
 }
})

Then use the transition feature:

<p transition= "Fade" ></p>

Asymptotic transition

Transition with V-for You can create an asymptotic transition. Add an attribute to a transition element stagger, Enter-stagger or Leave-stagger:

<div v-for= "Item in List" transition= "Stagger" stagger= "></div>"

Alternatively, provide a hook stagger, enter-stagger or Leave-stagger to better control:

Vue.transition (' Stagger ', {
 stagger:function (index) {
 //per Transition project increases 50MS delay
 //But maximum latency limit is 300ms
 return Math.min (EUR, Index *)
 }
)

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.