如何在 Material-UI(React) 中实现顺序动画

Question

我的组件如下所示：-

基本上我想要实现的是，最左边的 div 应该首先出现，然后经过一些延迟后第二个等等......目前所有 div 都同时出现。我尝试使用“nth-child”但达不到想要的效果。

我的疑问是我目前是否正在应用“nth-child”语法。如果没有，那么如何在 MUI 环境中实现这一点。

const Feature = () => {
  const classes = useStyles()
    
    const [isVisible, setIsVisible] = useState(false)
    const domRef = useRef()
    useEffect(() => {
        const observer = new IntersectionObserver((entries) =>{
            entries.forEach(entry => setIsVisible(entry.isIntersecting))
        })
         observer.observe(domRef.current)
         return () => observer.unobserve(domRef.current) //cleanup
    }, [])

  return (
        <Container maxWidth='lg'>
            <Grid container justifyContent='center' spacing={1}>
                {data.map((d, index) => {
                    return (
                        <Grid item xs={6} sm={6} md={3} className={classes.gridItem} key={d.id}>

//
**// This is the individual item div for which I want to achieve the animation.**
//
                            <div
                                className={`${classes.item} ${isVisible ? classes.animate : ''}`}
                                ref={domRef}
                            >
                                <SvgIcon component={d.icon} className={classes.icon} />
                                <Typography variant='h5' color='initial' className={classes.title}>
                                    {d.title}
                                </Typography>
                                <Typography
                                    variant='p'
                                    color='textSecondary'
                                    className={classes.desc}
                                >
                                    {d.desc}
                                </Typography>
                            </div>
                            <Hidden mdDown>
                                {index !== 3 && (
                                    <Divider
                                        orientation='vertical'
                                        style={{ height: '70%', marginLeft: '25px' }}
                                    ></Divider>
                                )}
                            </Hidden>
                        </Grid>
                    )
                })}
            </Grid>
        </Container>
  )
}

export default Feature

我的 Styles.jsx 文件如下所示：-

    '@keyframes move-up': {
        '0%': { opacity: '0', transform: 'translateY(30px)' },
        '100%': { opacity: '1', transform: 'translateY(0px)' },
    },
    gridItem: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    animate: {
        animation: '$move-up 1s ease-in-out',
    },
    item: {
        height: '200px',
        width: '250px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        '$item:nth-child(1)': {
            animationDelay: '1s',
        },
        '$item:nth-child(2)': {
            animationDelay: '2s',
        },
        '$item:nth-child(3)': {
            animationDelay: '3s',
        },
        '$item:nth-child(4)': {
            animationDelay: '4s',
        },
    },

this is the current effect for the above mentioned code.

Answer 1

应该是&:nth-of-type，而不是&:nth-child。子选择器的目标是子组件（SvgIcon、Typography 等），它们没有动画。

此外，这仅在 .item div 没有除 .items 之外的 div 兄弟姐妹时才有效。这意味着，Hidden 和 Divider 不能是 div。