变换：翻译动画不起作用答案

【问题标题】：Transform: Translate Animation not working变换：翻译动画不起作用
【发布时间】：2019-10-16 10:21:28
【问题描述】：

我想要实现一种“盲目效果”，点击按钮会导致覆盖 div 动画化，因此只有一小部分显示在屏幕顶部，它会显示下面的 div。

我正在使用 gatsby，带有 react spring 和样式化组件。我已将“盲”设置为组件，如下所示：-

const HeroWrapper = styled(animated.div)`
  background-color: blue;
  height: 100vh;
  width: 100vw;
  text-align: center;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  z-index: 15;
`
const HeroTitle = styled.h1`
  margin: auto;
  color: whitesmoke;
`

const Hero = () => {
  const [isHeroOpen, setHeroOpen] = useState(true)
  const heroAnimation = useSpring({
    transform: isHeroOpen ? `translate3d(0,0,0)` : `translate3d(0, -85%, 0)`,
  })

  return (
    <HeroWrapper style={heroAnimation} onClick={() => setHeroOpen(!isHeroOpen)}>
      <HeroTitle>I am a Hero Blind</HeroTitle>
      <div style={{ paddingBottom: '40px' }}>
        <button type="button" onClick={() => setHeroOpen(!isHeroOpen)}>
          Click
        </button>
      </div>
    </HeroWrapper>
  )
}

但是动画不适用于 transform:translate。如果我用背景颜色上的动画替换它...

    backgroundColor: isHeroOpen ? `#66666666` : `green`,

...它工作正常，所以一切都在使用状态切换。

此外，如果我在开发人员工具中修改了 transform:translate，它也可以工作 - 那我做错了什么？

非常感谢

【问题讨论】：

为什么不在样式化组件的css中定义transform？你也可以在那里应用条件。我的假设是style 没有做你认为的那样:)

标签： reactjs styled-components react-spring

【解决方案1】：

这是一个艰难的过程。显然，您还必须在第一个翻译中包含百分号，以便 react-spring 正确插入它。

const heroAnimation = useSpring({
  transform: isHeroOpen ? `translate3d(0,0%,0)` : `translate3d(0,-85%,0)`
});

这是一个沙盒：https://codesandbox.io/s/focused-maxwell-1m8vq

【讨论】：

彼得。那太棒了。 :-) 非常感谢