Question

我有一个div滚动消失，但它只是跳了一下，id喜欢自定义过渡淡出

class App extends React.Component {
  state = {
    scrolled: false,
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmout() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => this.setState({ scrolled: true });

  render() {
    return (
      <div>
        {!this.state.scrolled && <img src="..." />}
      </div>
    );
  }
}

Answer 1

您可以尝试使用CSS方法解决问题

例如，您可以使用npm类名

import cn from 'classnames';
// ...your code

render() {
    return (
      <div>
        <img src="..." className={cn({ animatedFadeOutClass: this.state.scrolled })} />
      </div>
    );
  }

和CSS

.animatedFadeOutClass {
   transition: 0.5s;
   opacity: 0;
   height: 0;
   overflow: hidden;
 }

或使用https://reactjs.org/docs/animation.html和npm react-addons-transition-group

如何将过渡添加到React滚动事件

1 个答案: