如何解决在 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。