React Next.js antd 首屏闪烁,样式不稳定的bug

说明

next.js + antd无样式的html渲染后, 各种css样式会经历从无到有的一个过渡.
由于动画比较快, 造成了闪烁的感觉, 体验很差
需要禁用 before 和 after的 transition , 之后再恢复.

代码

https://github.com/ant-design/ant-design/issues/16037

let Demo: FC<IProps> = (props) => { 
    useEffect(() => {    	
    	// 移除 dom, 恢复 transition
        document.getElementById('preventFlashOfUnstyledContent')?.remove();           
    }, []);

    return (
        <>
            <Head>
                {/* 解决antd css加载慢的闪烁问题 */}
                <style
                    id='preventFlashOfUnstyledContent'
                    dangerouslySetInnerHTML={{
                        __html: `*, *::before, *::after { transition: none !important; }`,
                    }}
                />
            </Head>     
            {/* ......... */}
        </>
    );
};

你可能感兴趣的:(JavaScript,react.js,bug,antd,next.js)