我想实现一种“盲目的效果”,即单击按钮将使叠加div动画化,因此只有一小部分显示在屏幕顶部,而下面显示了一个div。
我正在使用带有反应弹簧和样式化组件的gatsby。我将“盲人”设置为一个组件,如下所示:-
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,它也可以工作-那么我在做什么错了?
非常感谢
答案 0 :(得分:1)
那是很难的。显然,您还必须在第一个转换中包含百分号,以使react-spring能够正确地对其进行插值。
const heroAnimation = useSpring({
transform: isHeroOpen ? `translate3d(0,0%,0)` : `translate3d(0,-85%,0)`
});