使用framer-motion的滚动插值justifyContent的技巧
P粉238433862
P粉238433862 2023-08-31 18:42:45
[React讨论组]
<p>我有一段代码可以在x值之间进行动画,但是当尝试从justify-content: center转换到left时无法工作。</p> <p>以下是代码片段:</p> <pre class="brush:php;toolbar:false;">function Navbar() { const { scrollY } = useScroll(); const x = useTransform(scrollY, [0, 100], [&quot;center&quot;, &quot;left&quot;]); return ( &lt;motion.div layout className={styles.parent} style={{ justifyContent: x, display: &quot;flex&quot; }} transition={{ duration: 0.5 }} &gt; &lt;Image src=&quot;/BlackLogo-2.svg&quot; alt=&quot;Cg Logo&quot; width={100} height={100} style={{padding: 20,}} priority /&gt; &lt;/motion.div&gt; ) }</pre></p>
P粉238433862
P粉238433862

全部回复(1)
P粉293341969

我找到了一个解决方案。你只需使用useMotionValueEvent函数来检查是否滚动超过某一点,并将其设置为状态,然后必须将你的子元素(我的图片)包装在motion.div中,同时在外部div中设置类,如下所示:

function Navbar() {
  const { scrollY } = useScroll();
  const [Scrolled, setScrolled] = useState(false);
  
  useMotionValueEvent(scrollY, "change", (latest) => {
    if (latest > 200) {
      setScrolled(true);
    }
    else {
      setScrolled(false);
    }
  })

  return (
    <div 
      style={{justifyContent: Scrolled? "left" : "center"}}
      className={styles.icon}
    > 
      <motion.div
      layout
      transition={{type: "spring", stiffness: 700, damping: 30}}
      >
        <Image
          src="/BlackLogo-2.svg"
          alt="Cg Logo"
          width={100}
          height={100}
          style={{padding: 20,}}
          priority
        />
      </motion.div>
    </div>
  )

}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号