なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ

書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

2018/07/07

Vue でいっぱい transition したい

カテゴリー:Node.js

ページ遷移で transition して、ページ内コンテンツ切替で transition してってしたかった。

App.vue

<template lang="pug">
  .container transition(name="router-transition" mode="out-in"
  leave-active-class="..." ...) router-view
</template>

components/Page1.vue

<template lang="pug">
  .wrapper
    transition(name="content-transition" mode="out-in" ...)
      div(v-if="loading")
</template>

こんな感じで、vue-router つかって transition をネストさせる場合は、
間に 1 つ div とか挟んでおきましょうねというあれ。