【Vue.js】transitionコンポーネントの中の要素にアクセスする

transitionコンポーネントが表示される前に、 中のDOMの高さを取得したりしようとして詰まったのでメモ

v-on:enter イベントリスナーを使う

<p @click="showElem">表示ボタン</p>
<transition v-on:enter="getElem">
  <div v-show="isShow" id="hoge">中の要素</div>
</transition>

/* script */
data () {
  return {
      isShow: false
  }
},
methods: {
  showElem: function() {
    this.isShow = true;
    var h = document.getElementById('hoge').clientHeight;
    console.log(h); // 0 取得できない
  },
  getElem: function() {
    var h = document.getElementById('hoge').clientHeight;
    console.log(h); // 50 取得できる
  }
},

表示アニメーションが発生する前に高さを取得しようとして失敗したみたいでした。

v-on:enter 以外のイベントリスナー

イベント	タイミング
before-enter	要素の挿入前
enter	挿入されてアニメーションされる前
after-enter	挿入アニメーション後
enter-cancelled	挿入キャンセル時
before-leave	削除アニメーション実行前
leave	削除アニメーション実行前で、before-leaveの後
after-leave	要素の削除後
leave-cancelled	削除キャンセル時