dumi-theme-antd-web3/dist/hooks/useThemeAnimation.js

Ant Design 5.0 官网风格类似的 dumi2 主题插件

import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import { useEffect } from 'react';
import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
var viewTransitionStyle = "\n::view-transition-old(root),\n::view-transition-new(root) {\n  animation: none;\n  mix-blend-mode: normal;\n}\n\n.dark::view-transition-old(root) {\n  z-index: 1;\n}\n\n.dark::view-transition-new(root) {\n  z-index: 999;\n}\n\n::view-transition-old(root) {\n  z-index: 999;\n}\n\n::view-transition-new(root) {\n  z-index: 1;\n}\n";
var useThemeAnimation = function useThemeAnimation() {
  var startAnimationTheme = function startAnimationTheme(clipPath, isDark) {
    updateCSS("\n    * {\n    transition: none !important;\n  }\n    ", 'disable-transition');
    document.documentElement.animate({
      clipPath: isDark ? _toConsumableArray(clipPath).reverse() : clipPath
    }, {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)'
    }).addEventListener('finish', function () {
      removeCSS('disable-transition');
    });
  };
  var toggleAnimationTheme = function toggleAnimationTheme(event, isDark) {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    if (!(event && typeof document.startViewTransition === 'function')) {
      return;
    }
    var time = Date.now();
    var x = event.clientX;
    var y = event.clientY;
    // eslint-disable-next-line no-restricted-globals
    var endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
    updateCSS("\n    [data-prefers-color='dark'] {\n      color-scheme: light !important;\n    }\n\n    [data-prefers-color='light'] {\n      color-scheme: dark !important;\n    }\n    ", 'color-scheme');
    document
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    .startViewTransition( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
      var root;
      return _regeneratorRuntime().wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            root = document.documentElement;
            root.classList.remove(isDark ? 'dark' : 'light');
            root.classList.add(isDark ? 'light' : 'dark');
          case 3:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }))).ready.then(function () {
      console.log("Theme transition finished in ".concat(Date.now() - time, "ms"));
      var clipPath = ["circle(0px at ".concat(x, "px ").concat(y, "px)"), "circle(".concat(endRadius, "px at ").concat(x, "px ").concat(y, "px)")];
      removeCSS('color-scheme');
      startAnimationTheme(clipPath, isDark);
    });
  };

  // inject transition style
  useEffect(function () {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    if (typeof document.startViewTransition === 'function') {
      updateCSS(viewTransitionStyle, 'view-transition-style');
    }
  }, []);
  return toggleAnimationTheme;
};
export default useThemeAnimation;