滚动时触发 ReactCSSTransitionGroup

Question

我一直在想办法在滚动时触发反应 css 过渡组。假设我有一堆组件，这个例子在屏幕外呈现：

// component.jsx

import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import './style.css'
export default class extends React.Component {
    constructor() {
    super()
    this.state = {
      title: ['an off screen title']}
    }
    render() {
    const displayText = this.state.title.map(i => <h1 key={i}>{i.title}</h1>)
      return (
        <ReactCSSTransitionGroup
            transitionName='atxt'
            transitionEnterTimeout={1000}
            transitionLeaveTimeout={1000}>
          {displayText}
        </ReactCSSTransitionGroup>
      )
    }
}

// style.css

.atxt-enter {
  opacity: 0.01;
}
.atxt-enter.atxt-enter-active {
  opacity: 1;
  transition: opacity 1000ms ease-in;
}
.atxt-leave {
  opacity: 1;
}
.atxt-leave.atxt-leave-active {
  opacity: 0.01;
  transition: opacity 1000ms ease-in;
}

我希望过渡组在进入 View 时触发，而不仅仅是在最初呈现组件时触发。我一直在仔细研究文档并探索预制库/组件来实现这一点，但没有发现任何不涉及引入巨大动画库的东西......我知道 deep在我的鸟蛤中，有一种方法可以做到这一点，因此，在这里请教专业人士。干杯你们。

Answer 1

只是抛出一个想法：

当您滚动到特定元素时，使用 https://github.com/brigade/react-waypoint 将您的组件添加到 DOM。

<Waypoint onEnter={this.handleWaypointEnter} onLeave={this.handleWaypointLeave}/>

在您的 handleWaypointEnter 中，将您的 <ReactCSSTransitionGroup>...</ReactCSSTransitionGroup> 添加到 dom。这应该有效，根据 docs 它在进入 dom.

时应用动画

滚动时触发 ReactCSSTransitionGroup

Trigger ReactCSSTransitionGroup on scroll

javascript

css

reactjs

reactcsstransitiongroup