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

好吧，我想我可以跳过render方法中的动画部分，因为我在样式组件变量中使用了它。（很抱歉，我在上一篇文章中忘记提及这一点）。您的方法是我的第一种方法，但是没有用。

React Spring和样式化的组件

1 个答案: