我想让我的主要内容滑入并回到特定的道具上
所以我创建了动画,我想我会在道具改变的情况下添加反向。
现在下面的代码有效,但唯一的问题是在第一页加载时我可以看到“slideOutContent”动画
我不希望它发生,这些幻灯片只在侧边栏打开然后滑动内容时才会发生。
const slideInContent = keyframes`
from {
margin-left: 0;
}
to {
margin-left: 256px;
}
`;
const slideOutContent = keyframes`
from {
margin-left: 256px;
}
to {
margin-left: 0;
}
`;
// Here we create a component that will rotate everything we pass in over two seconds
const MainContentBox = styled.div`
animation: ${props => props.slide ? `${slideInContent} forwards` : `${slideOutContent}`};
animation-duration: 0.5s;
animation-timing-function: linear;
`;
这就是我使用这个组件的方式:
class PageWithDrawer ... {
constructor(props) {
super(props);
this.state = {
open: false
};
}
toggleMenu() {
this.setState(state => {
return { open: !state.open };
});
}
render() {
....other stuff
<MainContentBox slide={this.state.open}>
{this.props.children}
</MainContentBox>
....other stuff
}
答案 0 :(得分:0)
目前您正在为MainContentBox
提供布尔值,但您有三个条件:SLIDE_IN,SLIDE_OUT和NO_SLIDE条件。
为了避免第一次渲染的额外布尔标记,您可以在其他语言中创建所谓的Enum state.open
- 这三个值中任何一个的持有者。
// You can put these in a named {} for encapsulation
const NO_SLIDE = 0, SLIDE_OUT = 1, SLIDE_IN = 2;
class PageWithDrawer ... {
constructor(props) {
super(props);
this.state = {
open: NO_SLIDE, // Initial state
};
}
toggleMenu() {
this.setState(state => ({ open: state.open % 2 + 1 }));
}
state % 2 + 1
是转换0→1,1→2和2→1的公式。
现在让我们将状态变量映射到动画属性字符串:
const stateToAnimation = {
NO_SLIDE: 'none',
SLIDE_OUT: slideInContent + ' forwards',
SLIDE_IN: slideOutContent,
}
const MainContentBox = styled.div`
animation: ${props => ${stateToAnimation[props.slide]}};
`; // other props...
您可能还需要props.slide
加${}
,我不确定这种语法。
答案 1 :(得分:0)
也许只用 transition
代替 animation
。在这个特定的例子中,它应该可以完成这项工作,但我不确定它是否总是可能的。