时间戳

首页 > 解决方案 > React Spring 和样式化组件

reactjs - React Spring 和样式化组件

问题描述

我是 React 的新手，试图整合一些动画。我正在使用 Gatsby.js 框架。

const LeadHeading = styled(animated.h1)`
  font-weight: bold;
  font-size: 3rem;
  font-family: ${props => props.theme.fontSecondary};
  margin-bottom: 0;
  line-height: 2.5rem;  
  color: #FFF3D8;

const IndexPage = ({menuOpen}) => {

  const h1Animation = useSpring({
    opacity: menuOpen ? '0' : '1'
  })

  return (
    <>
      <Layout>
        <Section className="hero is-fullheight">
          <div className="hero-body container is-flex">
            <LeadHeading 
              style={h1Animation}
            >
              some heading
            </LeadHeading>           
          </div>
        </Section> 
      </Layout>   
    </>
  )
}
export default IndexPage

菜单状态通过 useState 钩子在“布局”组件中进行管理。

const [menuOpen, setMenuOpen] = useState(false)

基本上，我只想在菜单弹出时淡出 h1，因为由于菜单的透明度，它看起来不太好。

感谢你的帮助。

标签： reactjsgatsbyreact-spring

解决方案

const LeadHeading = styled(animated.h1)`
  font-weight: bold;
  font-size: 3rem;
  font-family: ${props => props.theme.fontSecondary};
  margin-bottom: 0;
  line-height: 2.5rem;  
  color: #FFF3D8;
`


const IndexPage = ({menuOpen}) => {

  const h1Animation = useSpring({
    opacity: menuOpen ? '0' : '1'
  })


  return (
    <>
      <Layout>
        <Section className="hero is-fullheight">
          <div className="hero-body container is-flex">
            <LeadHeading 
              style={h1Animation}
            >
              some heading....
            </LeadHeading>           
          </div>
        </Section> 
      </Layout>   
    </>
  )
}
export default IndexPage

EDIT// 菜单状态通过 useState 钩子在“布局”组件中进行管理。但是应该可以将数据传递给“IndexPage”对吗？

好的，我想我可以跳过渲染方法中的动画部分，因为我在上面的样式化组件变量中使用了它。（对不起，我忘了在我之前的帖子中提到这一点）。您的方法是我的第一个方法之一，但没有奏效。

推荐阅读