reactjs - Framer Motion/React- 在将新变体传递给运动组件后，framer 的内联样式持续存在

Question

处理具有两个子项的“Gallery”组件，“GalleryImage”当变量“inView”为真时通过 Framer-Motion 进行动画处理，该变量由 react-intersection 观察者的“useInView”提供。我的问题是这些图像需要基于窗口宽度（由变量“视口”表示）完全不同的动画/初始样式，但是如果页面以“桌面”大小加载并且图像动画某种变换，但是窗口被调整为“移动”，其中图像根本不需要转换，之前动画（或初始状态）的样式仍然存在。如何让这些内联样式在重新渲染时清除？

回购：https ://github.com/qcaodigital/cocktail_curations.git

export function GalleryImage({ img, viewport, reverse }){
    const [ref, inView] = useInView({threshold: .25, triggerOnce: true})
    let variant;
    if(viewport === 'mobile') {
        variant = transitions.mobileTransition;
    } else if(!reverse && img.card || reverse && !img.card) {
        variant = transitions.panFromRight
    } else if(!reverse && !img.card || reverse && img.card) {
        variant = transitions.panFromLeft
    } 
    return (
        <motion.div
            ref={ref} 
            key={img.url} 
            className={`${styles.Gallery__imgContainer} ${img.card ? styles.hasCard : null}`}
            variants={variant}
            animate={inView ? 'animate' : 'initial'}
        >
            {img.card && (
            <figcaption>
                <p>{img.card.subheader}</p>
                <a href={img.card.href}>
                    <h3>{img.card.header}</h3>
                </a>
            </figcaption>
            )}
            <motion.img src={img.url} alt={img.alt}/>
        </motion.div>
    )
}

----过渡文件-----

const transitions = {};

transitions.mobileTransition = {
    initial: {
        opacity: 0
    },
    animate: {
        opacity: 1,
        transition: {
            duration: 1
        }
    }
}

transitions.panFromRight = {
    initial: {
        opacity: 0,
        x: 0,
        y: 0
    },
    animate: {
        opacity: 1,
        x: -15,
        y: 15,
        transition: {
            duration: 1,
            opacity: {
                duration: 1.5
            }
        }
    }
}

transitions.panFromLeft = {
    initial: {
        opacity: 0,
        x: 0,
        y: 0
    },
    animate: {
        opacity: 1,
        x: 15,
        y: -15,
        transition: {
            duration: 1,
            opacity: {
                duration: 1.5
            }
        },
    }
}

export default transitions;