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

【问题标题】：CSS module being removed on path change before Framer Motion exit animation completes在 Framer Motion 退出动画完成之前，在路径更改时移除 CSS 模块
【发布时间】：2021-09-06 16:33:33
【问题描述】：

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

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

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

【问题讨论】：

标签： css reactjs next.js css-modules framer-motion

【解决方案1】：

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

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)

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

【讨论】：

【解决方案2】：

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

【讨论】：

我找到了一个解决方案（更像是一个修补程序），它适用于我尝试的每个部署。请参阅下面/上面的答案..

【解决方案3】：

不要使用 CSS 模块，而是尝试使其内联 CSS。

【讨论】：