Posted at

vue.jsのJavaScript Functionsによるアニメーション

More than 5 years have passed since last update.


  • 最近、vue.jsのドキュメントを読みながらちょっとずつメモしていってるのですが、そこで下記の意味がよくわからないなぁと思ったので実際にサンプル書いて確認してみました。




The third argument, timeout, is a wrapped version of setTimeout. You should use it in place of setTimeout so that when an effect is cancelled, its associated timers can be cleared.


vue.jsではcss transitionやcss animationによるアニメーションの他にjavascriptによるアニメーションもサポートしているのですが、その時に指定する関数に渡される第三引数はsetTimeoutのラッパーになっています。通常のsetTimeoutだとアニメーションがキャンセルされた時に何もしてくれずアニメーションの状態がおかしくなるので、timeoutを使うとアニメーションがキャンセルがされたときにclearTimeoutしてくれるのでうまく動くということでした。

jsfddleのサンプルでもtimeoutの部分をsetTimeoutにして連打すると状態がおかしくなるのがわかるかと思います。

わかれば納得ですが英語力低くて悲しい・・・