Question

在这里与新手联系，有人可以向我解释为什么这不起作用：

问题

无论何时设置状态，它都会从页面中删除整个组件。我已经隔离了这个问题，以确保只有在setAnimate更改时，它仍然具有相同的效果。

预期结果

当用户向下滚动到该部分时，我会更改状态（按预期工作），更改此状态后，应将Animejs自动播放值更改为true以显示该部分（此位不起作用，目前正在从页面中删除该部分。

import React, { useEffect, useState } from 'react';
import { Container } from '@material-ui/core';
import PropTypes from 'prop-types';
import style from './section.module.scss';
import Anime from 'react-anime';

export const Section = ({children}) => {
    let sectionPosition;
    const [animaion, setAnimation] = useState(false);

    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
    }, []);

    const handleScroll = () => {
        if (window.scrollY > sectionPosition.offsetTop) {
            setAnimation(true);
            window.removeEventListener('scroll', handleScroll);
        }
    };

    return (
        <Anime
            easing='linear'
            duration={500}
            autoplay={animaion}
            opacity={[0,1]}
            translateY={['100px', '0']}
        >
            <Container component="section" classes={{root: style.section}}>
                <div ref={el => sectionPosition = el}>
                    {children}
                </div>
            </Container>
        </Anime>
    );
};


Section.propTypes = {
    children: PropTypes.node.isRequired,
};

export default Section;

感谢您的帮助

谢谢

Answer 1

事实证明，问题出在react-anime库。删除此代码并自己编写过渡样式即可解决此问题。

react-anime似乎没有一种动态播放动画的正式方法，如上所述，我使用autoplay似乎并不是正确的方法。

反应组件设置状态未按预期工作

1 个答案: