1

我正在添加基于以下示例的过渡动画：https ://1y3yyqpq7q.codesandbox.io/

在我的代码库中，当我按下跳过按钮时，会发生转换，并且会显示一个“新”纸质组件。

问题是在转换过程中 X 滚动条被激活，看起来不太好。您可以在示例 (URL) 中看到相同的行为。我尝试使用 overflowX: "hidden" 但它不起作用。

任何建议如何在过渡期间删除溢出-X？

谢谢 

const useStyles = makeStyles(theme => ({
paper: {
    borderRadius: '12px',
    border: '1.5px solid',
    borderColor: '#7F00FF',
    marginBottom: '15px',
    position: 'absolute',
    width: '100%'
},
img: {
    height: 255,
    maxWidth: 400,
    overflow: 'hidden',
    display: 'block',
    width: '100%',
},
 }));

const [activeChapter, setActiveChapter] = useState(0);
const onClick = useCallback(() => setActiveChapter(activeChapter => (activeChapter + 1) % 4), [])


const transitions = useTransition(activeChapter, p => p, {
    from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
    enter: { opacity: 1, transform: 'translate3d(0%,0,0)'},
    leave: { opacity: 1, transform: 'translate3d(-105%,0,0)', overflowX: "hidden"},
}) 


<div>
        {transitions.map(({ item, props, key }) => {
            const chapter = data[item]
            if (chapter) {
                return (
                    <animated.div style={props} key={key}>
                        <Paper className={classes.paper} >
                            <Typography variant="h5">
                                {chapter.title}
                            </Typography>
                            <Grid container>
                                <Grid item xs>
                                    <img
                                        className={classes.img}
                                        src={classes.img[0]}
                                    />
                                </Grid>
                            </Grid>
                            <Grid container direction="row" justify="flex-end"  >
                                <Grid item >
                                    <IconButton onClick={onClick}>
                                        <SkipNextIcon />
                                    </IconButton>
                                </Grid>
                            </Grid>
                        </Paper>
                    </animated.div>)
            }
        })}
        <Box component="span" m={1} />
    </div>
4

1 回答 1

0

您可以尝试添加overflow: hidden;到正文中。

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

https://codesandbox.io/s/hopeful-poincare-8uckc

于 2019-07-23T07:40:11.107 回答