State transition in vuejs, how to use done in JavaScript hook?

vuejs official website tutorial, enter / leave & list transition section, talk about "JavaScript hook"
link: ide/transitions.html-sharpJavaScript-%E9%92%A9%E5%AD%90" rel=" nofollow noreferrer "> JavaScript hook

when only JavaScript transitions are used, done must be used for callbacks in enter and leave. Otherwise, they will be called by Synchronize and the transition will be completed immediately

I tested it with the demo provided on their official website and found that there was no problem with not using done, which was strange.

this is the official website demo:
official website demo
my rewritten demo:
my rewritten demo

I don"t see the difference, so I don"t understand the meaning of the description quoted above.

Vue.js javascript
Aug.03,2021

you can see the difference by clicking continuously. "Synchronize call, the transition will be completed immediately".

you can increase the time for asynchronous calls to observe the difference between asynchronous calls and Synchronize calls, adding that when parameters are injected into done, the call must be made, but not called, the program hangs, and when the parameters are not injected with done, the default is Synchronize call! If there is an asynchronous operation in the hook function, you need to use done for the callback after the async is successful.

if done () is not called, the hook functions of afterenter and afterleave will not be called.
then you find that when your show becomes false, the element will not disappear, because only when vue calls afterleave will it trigger display:none to hide the element to achieve the v-show effect of the element. If you write displa:none directly to the hook function in leave, you will find that the element disappears directly, because this attribute has no transition effect.
as for "Synchronize call, transition will be completed immediately", I have also tested this for a long time and found that it has no effect. The most coquettish thing is

.
  • you can transition if you don't call done, in the leave hook, but you can't hide it. The reason is written above.
  • if you call done, directly, there is no animation transition effect, and the element is directly hidden.
  • must be called asynchronously by setTimeout (the best time to delay is set to transition), or the transition will be completed immediately.

finally, I will say a few points, which is a bit of a pit.

  • be sure to set the el.style.transition time (if you only use the js hook), otherwise there will be no transition effect.
    • Set el.offsetWidth in the
  • enter hook to refresh the animation, otherwise there will be no transition effect.
  • in the enter hook, Synchronize can call done (), to set the transition after the above two steps, and the afterenter hook can be triggered.

Why not use css when it's so troublesome?

Previous: Learn to pack according to webpack Chinese website, and the error is as follows

Next: JQUERY multiple DIV clicks to show hidden questions.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu