变换:翻译动画不起作用
Posted
技术标签:
【中文标题】变换:翻译动画不起作用【英文标题】: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
没有做你认为的那样:)
【参考方案1】:
这是一个艰难的过程。显然,您还必须在第一个翻译中包含百分号,以便 react-spring 正确插入它。
const heroAnimation = useSpring(
transform: isHeroOpen ? `translate3d(0,0%,0)` : `translate3d(0,-85%,0)`
);
这是一个沙盒:https://codesandbox.io/s/focused-maxwell-1m8vq
【讨论】:
彼得。那太棒了。 :-) 非常感谢以上是关于变换:翻译动画不起作用的主要内容,如果未能解决你的问题,请参考以下文章