戴兜的小屋

├── `/`
│   ├── `/me`
│   └── `/friends`
├── `/projects`
├── `/blog/:slug`
└── `/404`

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>

<!-- App.vue -->
<RouterView v-slot="{ Component }">
    <RouterTransition>
        <component :is="Component" />
    </RouterTransition>
</RouterView>

<!-- RouterView.vue -->
<Transition 
     ref="SlotRef" :css="false"
     @before-enter="onBeforeEnter" @enter="onEnter" @after-enter="onAfterEnter"
     @before-leave="onBeforeLeave" @leave="onLeave"
>
    <slot />
</Transition>

const getTransitionContainer = (el) => {
    const containerClass = 'transition-page-wrapper';
    // elが要素でない場合、直接返す
    if (!el || !el.classList) {
        return el;
    }
    // elが対象要素の場合、直接返す
    if (el.classList.contains(containerClass)) {
        return el;
    }
    // それ以外の場合、elのすべての階層の子要素を遍歴し、対象要素を見つける
    for (let i = 0; i < el.children.length; i++) {
        const child = el.children[i];
        if (child.classList && child.classList.contains(containerClass)) {
            return child;
        } else {
            const _child = getTransitionContainer(child);
            if (_child != child) {
                return _child;
            }
        }
    }
    return el;
}

const fromWrapperStyle = {
    x: 0,
    y: 0,
    w: 0, // 幅
    h: 0, // 高さ
    br: 0, // border-radius 属性
    t: "", // transform 属性
};

const writeCfgObj = (el, cfgObj) => {
    const elRect = el.getBoundingClientRect();
    cfgObj.x = elRect.x;
    cfgObj.y = elRect.y;
    cfgObj.w = elRect.width;
    cfgObj.h = elRect.height;
    const _style = getComputedStyle(el);
    cfgObj.br = parseFloat(_style.borderRadius.replace("px", ""));
    cfgObj.t = _style.transform;
}

const onBeforeLeave = (fromEl) => {
    // ルート要素に基づいて、実際に遷移が必要な要素を取得
    let _fromWrapper = getTransitionContainer(fromEl);
    
    // 以前に書いたツールメソッドを使用して、要素の位置/サイズ/一部スタイルを記録
    writeCfgObj(_fromWrapper, fromWrapperStyle);
}

const onBeforeEnter = (toEl) => {
    // toElのコピーを作成
    let toWrapper = toEl.cloneNode(true);
    // 遷移を無効にして、要素が自動的に遷移するのを防ぎます
    toWrapper.style.transitionDuration = '0s'
    // 不透明度を0に設定
    toWrapper.style.opacity = 0;
    // bodyに挿入
    document.body.appendChild(toWrapper);

    // コピーした後のコンテナ内の遷移要素を取得
    let _toWrapper = getTransitionContainer(toWrapper);
    writeCfgObj(_toWrapper, toWrapperStyle);
    
    // 削除
    toWrapper.remove();
}

const calcDelta = (prevCfg, nextCfg, nextMatrix3dStr) => {
    const matrix3d = nextMatrix3dStr.replace(/matrix3d\(|\)/g, "").split(",").map((v) => parseFloat(v));
    // translateに変換
    const nextTranslateX = matrix3d[12];
    const nextTranslateY = matrix3d[13];

    // スケールを計算
    const scaleX = prevCfg.w / nextCfg.w;
    const scaleY = prevCfg.h / nextCfg.h;

    // 差分を計算
    let deltaX = prevCfg.x - prevCfg.x + nextTranslateX;
    let deltaY = prevCfg.y - prevCfg.y + nextTranslateY;

    // スケールを行ったため、スケールに基づいて差分を修正する必要があります
    deltaX -= (1 - scaleX) * nextCfg.w / 2;
    deltaY -= (1 - scaleY) * nextCfg.h / 2;

    return {
        deltaX,
        deltaY,
        scaleX,
        scaleY,
    };
}

const onLeave = (el, done) => {
    // 遷移すべき要素を取得
    el = getTransitionContainer(el);

    // 遷移効果を強制的に付与
    el.style.transitionProperty = 'all';
    el.style.transitionDuration = '1300ms';
    
    // ブラウザを少し待たせます ε=ε=ε=┏(゜ロ゜;)┛
    requestAnimationFrame(() => {
        const d = calcDelta(toWrapperStyle, fromWrapperStyle, fromWrapperStyle.t);
        
        // WindiCSSを使用しているため、ここではCSS変数を上書きする方法を採用しています
        // 直接transformを使用することもできます
        
        // 反転
        // ここでx軸とz軸の反転を行い、ちょうどコンテナを反転させます
        el.style.setProperty("--tw-rotate-x", "180deg");
        el.style.setProperty("--tw-rotate-z", "-180deg");
        
        // コンテナ(fromEl)を新しい位置(toElの位置)に移動
        el.style.setProperty("--tw-translate-x", `${d.deltaX}px`);
        el.style.setProperty("--tw-translate-y", `${d.deltaY}px`);
        el.style.setProperty("--tw-scale-x", `${d.scaleX}`);
        el.style.setProperty("--tw-scale-y", `${d.scaleY}`);
        
        // コンテナの角を変更
        const scale = (d.scaleX + d.scaleY) / 2;
        el.style.borderRadius = toWrapperStyle.br / scale + "px";
        
        // フェードアウト
        el.style.opacity = "0";
    })
    
    // 遷移終了イベントをリッスンし、transform遷移が完了した後にtransitionコンポーネントに遷移が終了したことを通知します
    let _event = null;
    el.addEventListener('transitionend', _event = (ev) => {
        if (ev.target === el && ev.propertyName === 'transform') {
            el.removeEventListener('transitionend', _event);
            done();
        }
    })
}

const onEnter = (el, done) => {
    el.style.transitionDuration = '0s'
    const d = calcDelta(fromWrapperStyle, toWrapperStyle, toWrapperStyle.t);
    el.style.setProperty("--tw-rotate-x", "-180deg");
    el.style.setProperty("--tw-rotate-z", "-180deg");
    el.style.setProperty("--tw-translate-x", `${d.deltaX}px`);
    el.style.setProperty("--tw-translate-y", `${d.deltaY}px`);
    el.style.setProperty("--tw-scale-x", `${d.scaleX}`);
    el.style.setProperty("--tw-scale-y", `${d.scaleY}`);
    el.style.opacity = "0";
    const scale = (d.scaleX + d.scaleY) / 2;
    el.style.borderRadius = fromWrapperStyle.br / scale + "px";

    document.body.offsetHeight;

    requestAnimationFrame(() => {
        el.style.transitionProperty = 'all';
        el.style.transitionDuration = '1300ms';

        // すべての属性をリセット
        el.style.borderRadius = "";
        el.style.opacity = "";
        el.style.setProperty("--tw-rotate-x", "");
        el.style.setProperty("--tw-rotate-z", "");
        el.style.setProperty("--tw-translate-x", "");
        el.style.setProperty("--tw-translate-y", "");
        el.style.setProperty("--tw-scale-x", "");
        el.style.setProperty("--tw-scale-y", "");
    })
    
    let _event = null;
    el.addEventListener('transitionend', _event = (ev) => {
        if (ev.target === el && ev.propertyName === 'transform') {
            el.removeEventListener('transitionend', _event);
            done();
        }
    })
}

const onAfterEnter = (el) => {
    el = getTransitionContainer(el);
    el.style.transitionProperty = '';
    el.style.transitionDuration = '';
}