transition when Route change

[shellRaining]

#2508 (comment)

This discussion has mentioned, but the Discord link within it has expired. Could you please provide more information?

My current solution is as follows

<script lang="ts" setup>
const router = useRouter();
function changeRoute(e: MouseEvent, to: string) {
  if (document.startViewTransition) {
    e.stopPropagation();
    // to avoid animation confict with the global transition
    const VPContentEl = document.querySelector(".VPContent")! as HTMLElement;
    VPContentEl.style.setProperty("view-transition-name", "route");
    const transition = document.startViewTransition(async () => {
      await router.go(to);
    });
    transition.finished.then(() => {
      VPContentEl.style.removeProperty("view-transition-name");
    });
  }
}
</script>

<template>
  <a @click="(e) => changeRoute(e, post.url)">{{ post.frontmatter.title }}</a>
</template>

<style>
@keyframes shift-to-left {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100px);
  }
}
@keyframes push-from-right {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
::view-transition-old(route) {
  animation: shift-to-left 0.3s linear;
}
::view-transition-new(route) {
  animation: push-from-right 0.3s linear;
}
</style>

However, the transition effect only occurs after clicking the link. If I use the back command, there is no transition effect. How can I monitor events like history.back() and provide a transition effect?

transition.mp4

[Deer404]

Maybe you can use it like this 🤔

import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
import { useRoute } from "vitepress";

export function useBrowserNativeTransitions() {
  const route = useRoute();
  const currentPathname = ref(route.path);
  const currentViewTransition = ref<null | [Promise<void>, () => void]>(null);

  const startViewTransition = () => {
    if (!("startViewTransition" in document)) {
      return Promise.resolve();
    }

    let pendingViewTransitionResolve: () => void;
    const pendingViewTransition = new Promise<void>((resolve) => {
      pendingViewTransitionResolve = resolve;
    });

    const pendingStartViewTransition = new Promise<void>((resolve) => {
      // @ts-ignore
      document.startViewTransition(() => {
        resolve();
        return pendingViewTransition;
      });
    });

    currentViewTransition.value = [
      pendingStartViewTransition,
      pendingViewTransitionResolve!,
    ];

    return pendingStartViewTransition;
  };

  const onPopState = () => {
    startViewTransition();
  };

  onMounted(() => {
    if (!("startViewTransition" in document)) {
      return;
    }
    window.addEventListener("popstate", onPopState);
  });

  onUnmounted(() => {
    if (!("startViewTransition" in document)) {
      return;
    }
    window.removeEventListener("popstate", onPopState);
  });

  watch(
    () => route.path,
    async (newPath, oldPath) => {
      if (currentViewTransition.value && currentPathname.value !== newPath) {
        await currentViewTransition.value[0];
      }

      await nextTick();
      currentPathname.value = newPath;

      if (currentViewTransition.value) {
        currentViewTransition.value[1]();
        currentViewTransition.value = null;
      }
    }
  );
}

usage:

// in layout component...
<script>
useBrowserNativeTransitions()
</script>

[shellRaining]

does in dev mode, but SSR mode would occur bug

Kapture.2024-08-05.at.19.12.53.mp4

[Deer404]

我明天再测试一下😲

[alephpi]

今天闲逛vitepress，发现了这个问题。我这边看链接没失效，之前得到的回答是这样的。

不知道你的解决方案在SSR mode上的bug解决了没有？

[alephpi]

补充一下

/*theme/index.ts*/
if (inBrowser) {
      router.onBeforeRouteChange = () => {
        let el = document.getElementById('VPContent')
        el?.classList.remove("fade-in")
        el?.classList.add("fade-out")

      }
      router.onAfterRouteChanged = () => {
        let el = document.getElementById('VPContent')
        el?.classList.remove("fade-out")
        el?.classList.add("fade-in")
      }
    }

/*theme/style.css*/

.fade-in {
  animation: fade-in 1s ease
}

.fade-out {
  animation: fade-out 0.5s ease
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

[alephpi]

我这样写的话前进后退无法触发，而且页面文字多了网速不够的话动画会闪进。