vue successful transition animations do not know why, after adding el.offsetWidth

Live in today of the grid

When using the transition animation vue: NOTE hook when using javascript animation is not out, you have to add an extra el.offsetWidth???

Explanation is this (unofficial):

Address reference point here

The reason is that the browser is not based on your js changes to the style of real-time updates, but generally after the current js modification, all modifications will update unity, and display: status none (which itself is not a transition) handover affected other transition effects of switching, after all, as none of the elements can not trigger the transition.
The offsetWidth open, you will find the transition to take effect, because the take offsetWidth cause the browser to redraw, modify the style behind the front, display indeed become a block, thereby eliminating the elements of the state to this effect none of the transition. Add setTimeout, the implementation of "interrupted" js also take effect

Consider the following code, you will find all the animations execute it?

beforeEnter (el) {
    el.style.marginLeft = '30px'
    el.style.opacity = 0
},
enter (el) {
    console.log(el.offsetWidth)
    el.style.marginLeft = '0px'
    el.style.opacity = 1
    el.style.transition = 'all 10s ease'
},
beforeLeave (el) {
    el.style.marginLeft = '0px'
    el.style.opacity = 1
},
Leave (el) {
    console.log(el.offsetWidth)
    el.style.marginLeft = '30px'
    el.style.opacity = 0
    el.style.transition = 'all 10s ease'
}

Here there will be a direct use el.offsetWidth no-unused-expressions eslint error, so to a console.log(el.offsetWidth)eslint not being given.
This code is problematic:
Not really!
Note : done () callback function, for invocation logic (after-leave) the after-enter, if not can not call. When After using the leave of animated transitions is gone!

Amway last vue a detailed document (that is, referral links oh!)

Vue && TypeSprict- summing up

I want to jump out of the grid!