1
0

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 1 year has passed since last update.

Vue.jsでDOMの更新を待ってイベントを発火する

Posted at

と検索するとまず$nextTickに辿り着く。あるいはsetTimeout。

ただこれは「DOMの更新を待つ」のであって、Vueのtransitionコンポーネントのアニメーション完了を待たない。そのためアニメーションして表示/非表示が切り替わるような要素が影響する情報(高さや位置情報)を、アニメーション完了後に取得したい~という場合$nextTickは不向き。

その場合はtransitionコンポーネントのJavaScriptフックを使う。

index.html
<transition :name="navAnime" @after-leave="getAnimated">
...
</transition>
script.js
getAnimated: function(){
...
},
...

自分のしたい事について遠回りしてしまうのはドキュメントを網羅的に読むのをぬかってしまうからだなと常々思う。

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?