Vue3 トランジションアニメーションの落とし穴記録について

<!-- 歌手.vue -->

<テンプレート>

<div class="歌手" v-loading="!singers.length">

  <インデックスリスト

    :data="歌手"

    @select="歌手を選択"

  </インデックスリスト>

  <!-- セカンダリルーティングを実行するにはルータビューを使用します -->

<!-- <ルータービュー:singer="選択された歌手"></ルータービュー>-->

  <!-- Vue3 はルータービューでトランジションを使用する必要があり、appear に入るとアニメーションが表示されます -->

  <router-view v-slot="{ コンポーネント }">

<!-- singer-detail はアニメーションの無効な調査を返します -->

    <transition appear name="スライド">

      <!-- コンポーネント 動的コンポーネント コンポーネントは、スコープ スロットのプロパティで、router-view グループによって提供されます。 コンポーネントは、ルーティング テーブル内のルーティング コンポーネントです。 exclude="singer-detail" は、データをキャッシュしないコンポーネントを除外します。そうでない場合は、データがキャッシュされ、毎回再要求されることはありません -->

        <component :is="コンポーネント"

                   :singer="選択した歌手"

        </コンポーネント>

    </トランジション>

  </ルータービュー>

</div>

</テンプレート>



<!-- 歌手の詳細.vue -->

<テンプレート>

  <!-- セカンダリ ルーティングを通じて実装されるため、ビューの下に配置されます -->

  <section class="歌手の詳細">

    <音楽リスト

      :songs="曲"

      :title="タイトル"

      :pic="写真"

      :loading="読み込み中"

    </音楽リスト>

  </セクション>

</テンプレート>

<!-- 歌手.vue -->

<テンプレート>

  <div class="歌手" v-loading="!singers.length">

    <インデックスリスト

      :data="歌手"

      @select="歌手を選択"

    </インデックスリスト>

    <router-view v-slot="{ コンポーネント }">

      <transition appear name="スライド">

        <component :is="コンポーネント" :data="選択された歌手"/>

      </トランジション>

    </ルータービュー>

  </div>

</テンプレート>

<!-- 歌手の詳細.vue -->

<テンプレート>

  <div class="歌手の詳細">

    <音楽リスト

      :songs="曲"

      :title="タイトル"

      :pic="写真"

      :loading="読み込み中"

    </音楽リスト>

  </div>

</テンプレート>

// @vue/runtime-core/dist/runtime.core-bundler.esm.js

残す(el, 削除) {

  デバッガ

  定数キー = String(vnode.key);

  el._enterCbの場合{

    el._enterCb(true /* キャンセルされました */);

  }

  // ...

}

// @vue/runtime-core/dist/runtime.core-bundler.esm.js

定数削除 = vnode => {

  デバッガ

  const { type、el、anchor、transition } = vnode;

  if (type === フラグメント) {

    フラグメントを削除します(el、アンカー);

    戻る;

  }

  if (type === 静的) {

    staticNode を削除します(vnode);

    戻る;

  }

  定数実行削除 = () => {

    ホストを削除します(el);

    if (遷移 && !transition.persisted && transition.afterLeave) {

      遷移後離れる();

    }

  };

  if (vnode.shapeFlag & 1 /* 要素 */ &&

    遷移 ＆＆

    !transition.persisted) {

    const { leave, delayLeave } = transition;

    const performLeave = () => leave(el, performRemove);

    （遅延離脱）の場合{

      delayLeave(vnode.el、performRemove、performLeave);

    }

    それ以外 {

      実行終了();

    }

  }

  それ以外 {

    削除を実行します();

  }

};

if (type === フラグメント) {

  フラグメントを削除します(el、アンカー);

  戻る;

}

<!-- 歌手の詳細.vue -->

<テンプレート>

  <!-- セカンダリ ルーティングを通じて実装されるため、ビューの下に配置されます -->

  <section class="歌手の詳細">

    <音楽リスト

      :songs="曲"

      :title="タイトル"

      :pic="写真"

      :loading="読み込み中"

    </音楽リスト>

  </セクション>

</テンプレート>

import { createCommentVNode を _createCommentVNode として、resolveComponent を _resolveComponent として、createVNode を _createVNode として、createElementVNode を _createElementVNode として、Fragment を _Fragment として、openBlock を _openBlock として、createElementBlock を _createElementBlock として } from "vue"

const _hoisted_1 = { クラス: "singer-detail" }

関数レンダリング(_ctx, _cache) {

  const _component_music_list = _resolveComponent("音楽リスト")

  戻り値 (_openBlock(), _createElementBlock(_Fragment, null, [

    _createCommentVNode("セカンダリルーティングを介して実装されるため、ビューの下に配置されます")、

    _createElementVNode("セクション", _hoisted_1, [

      _createVNode(_component_music_list, {

        曲: _ctx.songs、

        タイトル: _ctx.title,

        画像: _ctx.pic,

        読み込み中: _ctx.loading

      }, null, 8 /* PROPS */, ["songs", "title", "pic", "loading"])

    ])

  ], 2112 /* STABLE_FRAGMENT、DEV_ROOT_FRAGMENT */))

}

関数renderComponentRoot(インスタンス) {

  結果を出す

  // ...

  // 結果を取得するためにレンダリング関数を呼び出す

  // 属性のマージ

  // 開発モードではコメントは保持され、テンプレートで

  // ルート要素の横にコメントを付けてフラグメントにする

  ルート = 結果;

  setRoot = undefined とします。

  ((process.env.NODE_ENV !== 'production') の場合 &&

    結果.patchFlag > 0 &&

    result.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */) {

    [ルート、setRoot] = getChildRoot(結果);

  }

  // 遷移データを継承する

  (vnode.transition) の場合 {

    // ...

    ルートの遷移 = vnode の遷移;

  }

  結果を返す

}