This is the 22nd day of my participation in the August More Text Challenge

Animation hooks

In addition to using CSS to achieve vUE component transition and animation, you can also use JavaScript hook function to achieve, in the hook function directly manipulate DOM. You can also work with third-party JavaScript animation libraries such as velvet.js.

<transition v-on:before-enter="handleBeforeEnter" v-on:enter="handleenter" v-on:after-enter="handleafterEnter" v-on:enter-cancelled="handleenterCancelled" v-on:before-leave="handlebeforeLeave" v-on:leave="handleleave" v-on:after-leave="handleafterLeave" v-on:leave-cancelled="handleleaveCancelled" > <! -... --> </transition>Copy the code

Hook functions are divided into entry hook and exit hook, and the specific classification and meaning are as follows:

Entry hook On the hook
Before entering the transition: before-enter Before leaving transition operation: before-leave
Transition runtime: Enter Exit transition runtime: leave
After the transition is complete: after-enter After the transition operation: after-leave
When the transition is interrupted: enter-cancelled 3. Leave-cancelled when the transition is interrupted

First, create a common component, which can realize simple explicit and implicit switching

<div id="app"> <button type="button" @click="handleToggle"> @before-enter="handleBeforEnter" @enter="handleEnter" @after-enter="handleAfterEnter" > <child v-show="show"></child> </transition> </div> Vue.component('child', {template: '<div>') var vm = new Vue({el: "#app", data: function() { return { show: true } }, methods: { handleToggle() { this.show = ! this.show }, } })Copy the code

Entry hookbefore-enterEnter the pre-transition state

handleBeforEnter: function(el) {
    console.log('beforeenter')
    el.style.opacity = 0
},
Copy the code
  • Triggered when the reality transition animation area, i.e., the area entersbefore-enterHook function;
  • before-enterThe function also takes an el argument<transition>Wrapped thing), which represents the element that binds the transition animation.

Entry hookenterTransition into the perfect state

handleEnter: function(el,done) {
        setTimeout(function() {
        el.style.opacity = 1;
        done()
        }, 2000)
},
Copy the code
  • Syntax: before-enter takes two arguments. The syntax is Enter (el,done), and done is the callback.
  • Trigger timing: The next frame after before-Enter is triggered will actually run the animation, and the entire animation will be placed in the Enter hook stage.
  • Done callback function: When the animation is finished, you need to call the done callback function manually to tell vue that the animation is finished, and then you can proceed to the next step.

After the transition@after-enter="handleAfterEnter

handleAfterEnter: function(el) {
        console.log('afterenter')
        el.style.opacity = 1
}
Copy the code
  • Execution timing: The done() callback is triggered after the enter transition is complete to inform vue that the animation is finished. The next step is to execute the hook function after the post-Enter transition is complete.
  • After-enter takes a parameter el

When the transition is interrupted@before-enter="handleenterCancelled

handleEnterCancel: function() {
    console.log('enter-cancelled')
}
Copy the code

Exit hook syntax is similar to entrance hook syntax.

  1. Before-leave (EL) before transition operation;
  2. Leave (el,done);
  3. After-leave (EL) after transition operation;
  4. 3. Leave-cancelled (el) when the transition is interrupted.
  • 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.
  • If you want to set the effects of components transiting in and not leaving, you can use the beforeEnter, Enter, and afterEnter hook functions.

Velocity. Js animation library

  1. Velocity is an easy-to-use, high-performance, feature-rich, lightweight JS animation library. It works perfectly with jQuery and has the same API as $.animate(), but it doesn’t rely on jQuery and can be used alone.
  2. Not only does Velocity incorporate all of $.animate(), it also features color animation, transforms, loops, easing, SVG animation, and rolling animation.
  3. There are dozens of predefined animation apis like animate. CSS
  4. Support custom dynamic effect, assemble queue dynamic effect and so on
  5. Animation callbacks such as the Begin & Complete & Progress callbacks

Usage:

  1. Introduce the velocity.js file
<script src="./velocity.min.js"></script>
Copy the code
  1. The specific implementation
handleEnter: function(el, done) {
        console.log('enter')
        velocity(el, {
                opacity: 1
        }, {
                duration: 2000,
                complete: done
        })
},
Copy the code

Other uses of velocity.js can be found on the Velocity API