React Spring 和样式化组件

Question

我是 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，因为由于菜单的透明度，它看起来不太好。

感谢您的帮助。

Answer 1

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”吧？

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