Talk a little bit. Vue.js transition effect _javascript skills

With the Vue.js transition system, you can easily add a transition animation effect to the process of inserting/removing a DOM node. Vue will add/Remove CSS class names at the right time to trigger CSS3 transitions/animations, and you can also provide the corresponding JavaScript hook function to perform custom DOM operations during the transition process.

Take the v-transition= "My-transition" as an example, when a DOM node with this instruction is inserted or removed, Vue will:

Use the my-transition ID to find out if there is a registered JavaScript hook object. This object can be registered globally by vue.transition (ID, hooks) or by the Transitions option defined within the current component. If this object is found, the corresponding hook is invoked at different stages of the transition animation.

Automatically detects whether the target element applies css transitions or animations, and adds/removes CSS class names at the appropriate time.

If the JavaScript hook function is not provided and the corresponding CSS transition/animation effect is not detected, the insertion/removal of the DOM is performed immediately in the next frame.
All vue.js transitions take effect only if the DOM operation is triggered by Vue.js. The trigger can be triggered by a built-in instruction, such as v-if, or by means of a Vue instance, such as a VM. $appendTo ().

CSS transition Effect
A typical CSS transition effect is defined as follows:

<div v-if= "Show" v-transition= "expand" >hello</div>

You also need to define expand-transition,. Expand-enter and. Expand-leave Three CSS classes:

. expand-transition {
 transition:all. 3s ease;
 height:30px;
 padding:10px;
 Background-color: #eee;
 Overflow:hidden
}
. Expand-enter,. expand-leave {
 height:0;
 padding:0 10px;
 opacity:0;
}

At the same time, you can also provide JavaScript hooks:

Vue.transition (' expand ', {
 beforeenter:function (EL) {
  el.textcontent = ' Beforeenter '
 },
 enter: Function (EL) {
  el.textcontent = ' Enter '
 },
 afterenter:function (EL) {
  el.textcontent = ' Afterenter '
 },
 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
 }
})

Results

The CSS class name used here is determined by the value of the v-transition directive. Take v-transition= "Fade" for example, CSS classes. Fade-transition will always be there, and. Fade-enter and. Fade-leave will be automatically added or removed at the right time. When the V-transition directive does not provide a value, the CSS class name used is the default. V-transition,. V-enter and. V-leave.

When the show property changes, Vue inserts/removes <div> elements according to its current value, and adds/removes the corresponding CSS class at the right time, as follows:

When show turns false, Vue will:

1. Call Beforeleave Hook;
2. Apply CSS classes on elements. V-leave to trigger the transition effect;
3. Call leave hook;
4. Wait for the transition effect to complete; (monitor Transitionend events)
5. Remove elements from the DOM and remove the CSS class. V-leave.
6. Call the Afterleave hook.

When show is true, Vue will:

1. Call Beforeenter Hook;
2. Apply CSS classes on elements. V-enter;
3. Inserting elements into the DOM;
4. Call Enter hook;
5. Apply the. V-enter class, and then force the CSS layout to ensure that the. V-enter takes effect, and finally removes. V-enter to trigger the transition of the element to its original state.
6. Wait for the transition effect to be completed;
7. Call the Afterenter hook.

In addition, if an element that is performing a transition effect is removed before the transition is completed, the entercancelled hook will be executed. This hook can be used to clean up work, such as removing the timer created when you enter. The same is the case for elements that are being reinserted while they are leaving the transition.

When all of the above hook functions are executed, this refers to the corresponding Vue instance. If an element is itself the root node of a Vue instance, this instance is applied as this; otherwise this will point to the instance to which the transition instruction belongs.

Finally, the Enter and leave hook functions can accept the optional second argument: a callback function. When your function signature contains the second parameter, it means that you expect to use this callback to explicitly complete the transition, rather than relying on Vue to automatically detect the Transitionend event of the CSS transition. Like what:

The end of the Enter:function (EL) {
 //No second parameter
 //transition effect is determined by the CSS transition End Event
}

Vs

Enter:function (el, done) {
 //There is a second parameter
 //transition effect end must be called by manual ' do ' to decide
}

When multiple elements perform a transition effect at the same time, vue.js is processed in batches to ensure that only one forced layout is triggered.

CSS Animation
CSS animations are invoked in the same way as CSS transitions, except in animations. The V-enter class is not removed immediately after the node is inserted into the DOM, but is removed when the Animationend event is triggered.

Example: (The compatibility prefix is omitted)

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

. 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);
 }
}

Results

Pure JavaScript Transition Effect
You can also use only JavaScript hooks and do not define any CSS transition rules. When using only JavaScript hooks, the Enter and leave hooks must use the done callback, otherwise they will be called synchronously and the transition will end immediately. In the following example we use JQuery to register a custom JavaScript transition effect:

Vue.transition (' fade ', {
 enter:function (el, done) {
  //This time the element has been inserted into the DOM
  //When the animation completes calls to do callback
  $ (EL)
   . CSS ( ' Opacity ', 0)
   . Animate ({opacity:1}, 1000, done)
 },
 entercancelled:function (EL) {
  $ (EL). Stop ()
 },
 leave:function (el, done) {
  //with the Enter Hook
  $ (EL). Animate ({opacity:0}, 1000, done)
 },
   leavecancelled:function (EL) {
  $ (EL). Stop ()
 }
})

After you define this transition, you can invoke it by assigning the corresponding ID to v-transition:

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

If a JavaScript-only transition effect element happens to be affected by other CSS transition/animation rules, this may interfere with the Vue CSS transition detection mechanism. In this situation, you can prevent CSS detection by adding css:false to your hook object.

Progressive transition effect
When using both V-transition and v-repeat, we can add a gradual transition effect to the list element, and you need only add stagger, Enter-stagger, or Leave-stagger attributes (in milliseconds) for your transition elements:

<div v-repeat= "list" v-transition stagger= "></div>"

Alternatively, you can provide stagger, enterstagger, or eavestagger hooks for finer granularity control:

Vue.transition (' Stagger ', {
 stagger:function (index) {//)
  adds a 50ms delay for each transition element,
  //But the maximum delay is 300ms return
  Math.min (EUR, Index *)
 }
)

Example:

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.