Vue is implemented with js partial control animation and vuejs partial Animation

Vue is implemented with js partial control animation and vuejs partial Animation

The last time we mentioned how to use vue to implement transition animation, We only talked about part of the vue animation. We used the css state control animation that comes with vue to implement it without js.

Http://www.cnblogs.com/null11/p/7081506.html

In vue, there is also a way to control the animation implementation, that is, using js to control the animation status

The three statuses are as follows:

: Before-enter = "name" before the animation enters : Enter = "name" after the animation enters : Leave = "name": the animation ends.

 

Next let's look at the instance

<! DOCTYPE html> 
In the html section, I used the animation function of jquery because of animation control. We will try our best to make things clean when using vue, so we should not use jquery when using vue.
The above uses the vue built-in animation component transition, and we are bound to the 3 medium state of the animation.
<Transition
V-on: before-enter = "beforeEnter"
V-on: enter = "enter"
V-on: leave = "leave"
V-bind: css = "false"
>
Or the previous graph, before entering, in progress, after entering

Next, we start to write the js part for control.
New Vue ({el: '# app', data: {show: true}, methods: {// before entering beforeEnter: function (el) {detail (el).css ({left: "-500px", opacity: 0})}, // enter: function (el, done) {$ (el ). stop (). animate ({left: 0, opacity: 1}, {duration: 1500, complete: done}, 5000)}, // end leave: function (el, done) {$ (el ). stop (). animate ({left: "500px", opacity: 0 },{ duration: 1500, complete: done}, 5000 )}}});
The three animation states are OK. Is it very simple?