20
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at
  • 最近、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にして連打すると状態がおかしくなるのがわかるかと思います。

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

20
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?