javascript - データがvue.jsのコンポーネントにロードされたときに遷移をトリガーする方法は?

Question

現在、vue.js と vue-router を使用したプロジェクトに取り組んでいます。いくつかのニュースを表示するビューを取得し、それらのニュースを API (ブログのようなもの) から取得しました。

ここでrouter.data述べたように、コンポーネントのデータを設定するために、現在これらのニュースを にロードしています。問題なく動作しています。

しかし、私の問題は、このビューに移動したときにニュースの出現をアニメーション化したいということです。readyコンポーネントからプロパティを使用しようとしましたrouter.dataが、要素がないため、ニュースの取得が完了する前に呼び出され、アニメーションでエラーが発生します。

取得したニュースが DOM 内で完全にレンダリングされたら、どうすればアニメーションをトリガーできますか?

私のコンポーネントのコードは次のとおりです。

export default {
  name: 'News',
  data: function () {
    return {
      news: []
    }
  },
  route: {
    data: function (transition) {
      console.log('data hook')
      return api
      .getPostsByLimit(4, 1)
      .then(function (posts) {
        for (var i = 0; i < posts.length; i++) {
          var post = posts[i]
          post.formatedDate = moment(post.date).format("D MMM. YYYY")
          post.dateTime = moment(post.date).format("YYYY-MM-DD")
          if(post.news_artist_related) {
            post.news_artist_related = JSON.parse(post.news_artist_related)
            post.news_artist_related.type = slugify(post.news_artist_related.type)
            post.news_artist_related.slug = slugify(post.news_artist_related.slug)
          }
        }
        return posts
      })
      .then(news => ({news}))
    }
  },
  ready: function () {
    console.log('Ready hook')
    animateNewsApparition()
  }
}