在 Framer Motion 退出动画完成之前，路径更改时移除 CSS 模块

问题描述

回购：https://github.com/qcaodigital/cocktail_curations
直播：https://youthful-mestorf-0859a8.netlify.app/

我刚刚将我的 NextJS 项目部署到 Netlify，除了上述问题之外，一切似乎都很好。每个页面都有一个退出动画（当前设置为不透明度 1' --> '0' @ 1000 毫秒）。出于测试目的，我将“联系页面”退出的动画时间减少到 0 毫秒。

我正在收集的是，SCSS.module 在动画完成之前被移除，因为在动画应该发生时，您可以看到标记仍在页面上，没有任何样式。>

解决方法

修补程序模块：将其导入您的顶级组件

import Router from 'next/router'

export const fixTimeoutTransition = (timeout: number): void => {
  Router.events.on('beforeHistoryChange',() => {
    // Create a clone of every <style> and <link> that currently affects the page. It doesn't matter
    // if Next.js is going to remove them or not since we are going to remove the copies ourselves
    // later on when the transition finishes.
    const nodes = document.querySelectorAll('link[rel=stylesheet],style:not([media=x])')
    const copies = [...nodes].map((el) => el.cloneNode(true) as HTMLElement)

    for (let copy of copies) {
      // Remove Next.js' data attributes so the copies are not removed from the DOM in the route
      // change process.
      copy.removeAttribute('data-n-p')
      copy.removeAttribute('data-n-href')

      // Add duplicated nodes to the DOM.
      document.head.appendChild(copy)
    }

    const handler = () => {
      // Emulate a `.once` method using `.on` and `.off`
      Router.events.off('routeChangeComplete',handler)

      window.setTimeout(() => {
        for (let copy of copies) {
          // Remove previous page's styles after the transition has finalized.
          document.head.removeChild(copy)
        }
      },timeout)
    }

    Router.events.on('routeChangeComplete',handler)
  })
}

然后调用 fixTimeoutTransition 函数并传递一个参数，其中包含您希望 css/scss.module（以毫秒为单位）在被删除之前持续多长时间（在我的情况下，这是我的页面转换的持续时间）。

fixTimeoutTransition(1000)

这不是我自己的代码，如果这对您不起作用，请见谅。

,

在 github 上发现了同样的问题。作为一种解决方法（幸运的是，我有一个小项目），我删除了所有文件 [name].module.css 并将所有样式移动到 global stylesheet