NextJS重载动画上的帧运动跳跃过快问题

hyrbngr7 于 2023-05-17 发布在其他

关注(0)|答案(1)|浏览(157)

我正在为我的NextJS上的着陆页做一个动画，在localhost上一切正常，但在我部署并测试之后，动画行为发生了变化，有点奇怪。动画制作得太快了。我正在使用Chrome进行本地开发和生产模式测试。我试着使用Firefox，过渡工作在那里罚款不像在Chrome。

本地主机：（无问题）Localhost
Firefox -已部署：（无问题）Firefox
Chrome -已部署：（动画问题）

Chrome
Website Link

我的编码Code Repo

<section className="w-full h-auto flex justify-center">
                <div className="w-full max-w-[1400px] md:mx-[8rem] mx-[2rem] h-[85vh] flex flex-col md: md:flex-row">
                    <div className="flex items-center h-full w-full justify-center">
                        <div className="">

                            <motion.h1 initial={{x: -300, opacity: 0}} animate={{x: 0, opacity: 100}} transition={{duration: 0.7}} className="text-greenSteps w-full xl:text-6xl font-[800] uppercase font-raleway md:text-5xl md:w-[20rem] text-center md:text-left text-4xl mt-10 md:mt-0">Welcome<span className="text-heroOrange font-raleway"> Tigers</span></motion.h1>
                            <motion.p  initial={{x: -300, opacity: 0}} animate={{x: 0, opacity: 100}} transition={{duration: 0.7, delay: 0.1}} className="max-w-[23rem] font-poppins text-greenBg mt-8 md:ml-2 ml-0 text-sm lg:text-md md:text-left text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</motion.p>

                            <motion.div initial={{x: -300, opacity: 0}} animate={{x: 0, opacity: 100}} transition={{duration: 0.7, delay: 0.2}}  className={`md:flex md:ml-2 mt-8 rounded-lg hidden items-center justify-center p-[1px] bg-greenButton hover:bg-white w-40 mx-auto`}>
                                <div className="font-inter bg-greenButton text-white p-3 rounded-lg text-sm font-medium text-center hover:bg-greenHover cursor-pointer select-none w-full">
                                    <p className="tracking-wider">
                                        View products
                                    </p>
                                </div>
                            </motion.div >

                        </div>
                    </div>

                    <motion.div initial={{x: 300, opacity: 0}} animate={{x: 0, opacity: 100}} transition={{duration: 0.7}} className="md:items-center justify-center w-full h-full flex">
                        <div className="xl:w-[33rem] lg:w-[27rem]  md:w-[20rem] w-[15rem] mt-3 md:mt-0">
                            <Image src="/hero/phonetiger.webp" alt="Phone" height="400" width="400" className="w-full h-auto" />

                            <div className="items-center mt-8 justify-center flex md:hidden">
                                <p className="text-center text-greenSteps font-bold">View products</p>
                                <MdOutlineKeyboardArrowDown className="ml-2 text-2xl"/>
                            </div>

                        </div>
                    </motion.div>
                </div>
            </section>

我尝试在进入之前添加动画延迟，但仍然没有解决，当刷新时间太长时，它有时在Chrome上工作正常，但大多数时候动画行为很奇怪，不是我想要的。

next.js

来源：https://stackoverflow.com/questions/75065454/framer-motion-on-nextjs-reload-animation-jumping-too-fast-issue

1条答案

按热度按时间

eqqqjvef1#

编辑：我通过在调用组件之前手动添加setTimeout来解决这个问题。我还将Hero部分作为一个组件，这样我就可以有条件地渲染它

export const Home: NextPage<Status> = (props) => {
    const { status } = props
    const router = useRouter()
    const [showHero, setHero] = useState(false)

    useEffect(() => {
        setTimeout(() => {
            setHero(true)
        }, 700);
    }, [])
    

    useEffect(() => {
        console.log(status);
    }, [])
    

    return (
        <>
            <Head>
                <title>Tigershop</title>
                <meta name="viewport" content="initial-scale=1.0, width=device-width" key="hero" />
            </Head>
            <Nav status={status}/>
            <AnimatePresence>
                {showHero ? <Hero key="HERO" /> : null}
            </AnimatePresence>
            
        </>
    )
}

export default Home

赞(0）回复(0）举报 2023-05-17

我来回答

NextJS重载动画上的帧运动跳跃过快问题

1条答案

相关问题

热门标签

最新问答