View Transition API + vue3 + Element-plus

View Transition API

View Transitions API提供了一种机制，可以在更新 DOM 内容的同时，轻松地创建不同 DOM 状态之间的动画过渡。同时还可以在单个步骤中更新 DOM 内容。例如本站的黑色皮肤切换，会有一个过渡动画。如果你在本站切换皮肤时看不到动画效果，说明你的浏览器并不支持，View Transition API是一个非常新的web API。
截止到2023年12月27日 已支持该API的浏览器：

其中绿色代表浏览器已经支持，并且指明了浏览器版本号。
例如:

• chrome浏览器版本号 11.1至12.3版本的支持
• 4至11.0的版本的chrome浏览器 不支持

View Transition API + vue3 + Element-plus

View Transition API 结合 Element-plus的使用方法，即是本站皮肤切换效果

 <el-button size="small" @click="toggleTheme($event)" circle />

const isDark = useDark();
const toggleDark = useToggle(isDark);


const isDarkTag = ref(false);
const toggleTheme = (event) => {
  const x = event.clientX;
  const y = event.clientY;
  const endRadius = Math.hypot(
      Math.max(x, innerWidth - x),
      Math.max(y, innerHeight - y)
  );

  // 兼容性处理
  if (!document.startViewTransition) {
    toggleDark()
    return
  }
  const transition = document.startViewTransition(() => {
    const root = document.documentElement;
    isDarkTag.value = root.classList.contains('dark');
    isDark.value = !isDarkTag.value;
    root.classList.remove(isDarkTag.value ? 'dark' : 'light');
    root.classList.add(isDarkTag.value ? 'light' : 'dark');
  })

  transition.ready.then(() => {
    const clipPath = [
      `circle(0px at ${x}px ${y}px)`,
      `circle(${endRadius}px at ${x}px ${y}px)`,
    ];
    document.documentElement.animate(
        {
          clipPath: isDarkTag.value ? [...clipPath].reverse() : clipPath,
        },
        {
          duration: 600,
          easing: 'ease-in',
          pseudoElement: isDarkTag.value
              ? '::view-transition-old(root)'
              : '::view-transition-new(root)',
        }
    );
  });
}

.dark::view-transition-old(root) {
    z-index: 1;
}
.dark::view-transition-new(root) {
    z-index: 1999;
}


::view-transition-old(root) {
    z-index: 1999;
}
::view-transition-new(root) {
    z-index: 1;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

• 该代码可以直接使用
• 需要了解View Transition API 更多方法可以访问文档
• 文档

本文转载于:

王润泽博客

https://wangrunze.com/20.html