home PYTHONJAVA
 

Vue.js transition & animation

In this chapter we mainly discuss the transition effects and animation effects of Vue.js.


Transition

Vue provides a variety of different ways of applying transition effects when inserting, updating, or removing a DOM.

Vue provides a built-in transition package that wraps the components for the transition.

syntax format

<transition name = "nameoftransition">
<div></div>
</transition>

We can use the following examples to understand how Vue's transition is implemented:

Instance

<div id = "databinding"> <button v-on:click = "show = !show">click me</button> <transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">Animation example </p> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { show:true, styleobj :{ fontSize:'30px', color:'red' } }, methods : { } }); </script>

In the instance, change the value of the variable show from true to false by clicking the "Click me" button. If true, the content of the child element p tag is displayed.

The following code shows that the transition tag wraps the p tag:

<transition name = "fade ">
    <p v-show = "show" v-bind:style = "styleobj">Animation examples</p>
</transition>

The transition is actually a fade effect. Vue provides 6 classes to switch between element display and hidden transitions:

  • v-enter: Defines the starting state of the transition. Effective before the element is inserted, removed in the next frame after the element is inserted.

  • v-enter-active: Defines the state when the transition is in effect. Applies throughout the transition phase, takes effect before the element is inserted, and is removed after the transition/animation is completed. This class can be used to define the process time, delay, and curve functions that enter the transition.

  • v-enter-to: Version 2.1.8 and above Defines the end state of the transition. The next frame takes effect after the element is inserted (at the same time v-enter is removed) and is removed after the transition/animation is completed.

  • v-leave: Defines the starting state of the leaving transition. Effective immediately when the exit transition is triggered, the next frame is removed.

  • v-leave-active: Defines the state when the transition is in effect. Applied throughout the transition phase, effective immediately upon exiting the transition, and removed after the transition/animation is completed. This class can be used to define the process time, delay, and curve functions that leave the transition.

  • v-leave-to: Version 2.1.8 and above Defines the end state of the transition. The next frame takes effect after the exit transition is triggered (at the same time v-leave is deleted) and is removed after the transition/animation is completed.

For these class names that switch between transitions, if you use a <transition> with no name, then v- is the default for these class names. Prefix. If you use <transition name="my-transition">, then v-enter will be replaced with my-transition-enter .

v-enter-active and v-leave-active can control different mitigation curves for entry/exit transitions, as illustrated in the following sections.

CSS transition

Usually we all use CSS transitions to achieve results.

Example below:

Instance

<div id= " databinding"> <button v-on:click = "show = !show">Click me</button> <transition name="slide-fade"> <p v-if="show">hello</p> ; </transition> </div> <script type = "text/javascript"> New vue({ El: '#databinding', Data: { Show: true } }) </script>

CSS animation

CSS animation usage is similar to CSS transitions, but in animations the v-enter class name is not removed immediately after the node is inserted into the DOM, but is deleted when the animationend event fires.

Instance

<div id= " databinding"> <button v-on:click = "show = !show">Click me</button> <transition name="bounce"> <p v-if="show"> rookie tutorial - learning is not only technology, but also a dream! ! ! </p> </transition> </div> <script type = "text/javascript"> New vue({ El: '#databinding', Data: { Show: true } }) </script>

Customized transition class name

We can customize the transition class name with the following features:

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)

Customized transition class names take precedence over normal class names, which works well with third-party (eg animate.css) animation libraries.

Instance

<div id= " databinding"> <button v-on:click = "show = !show">Click me</button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show"> rookie tutorial - learning is not only technology, but also a dream! ! ! </p> </transition> </div> <script type = "text/javascript"> New vue({ El: '#databinding', Data: { Show: true } }) </script>

Use transitions and animations together

Vue In order to know the completion of the transition, the corresponding event listener must be set. It can be transitionend or animationend depending on the CSS rules applied to the element. If you use any of these, Vue automatically recognizes the type and sets the listener.

However, in some scenarios, you need to set two transition effects for the same element at the same time, such as animation is quickly triggered and completed, and transition The effect is not over yet. In this case, you'll need to use the type attribute and set animation or transition to explicitly declare the type of Vue listener you need.

Demographic transition duration

In many cases, Vue can automatically get the timing of the completion of the transition. By default, Vue will wait for the first transitionend or animationend event of its root element in the transition effect. However, it is not necessary to set this up—for example, we can have a series of transition effects that are carefully orchestrated, with some nested internal elements having a delayed or longer transition effect than the root elements of the transition effect.

In this case you can customize a dominant transition duration (in milliseconds) using the duration attribute on the <transition> component:

<transition :duration ="1000">...</transition>

You can also customize the duration of entry and exit:

<transition :duration ="{ enter: 500, leave: 800 }"> ...</transition>

JavaScript hook

You can declare JavaScript hooks in properties:

HTML code:

<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>

JavaScript Code:

// ... methods: { // -------- // Entering // -------- beforeEnter: function (el) { // ... }, // This callback function is an optional setting //Used when combined with CSS enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // When leaving // -------- beforeLeave: function (el) { // ... }, // This callback function is an optional setting //Used when combined with CSS leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled v-show in leaveCancelled: function (el) { // ... } }





welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.