javascript - Trigger ReactCSSTransitionGroup on scroll - Stack Overflow

I've been trying to figure out how to trigger the react css transition group on scroll. Say i've got a stack of ponents and this example gets rendered off screen :

// ponent.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;
}

I want the transition group to be triggered when it enters the View and not just when the ponent is initially rendered. I've been mulling over the docs and exploring pre-made libraries / ponents to acplish this but have not found anything that doesn't involve bringing in huge animation libraries... I know deep in my cockles there is a way to do this, hence, asking the pros here. Cheers ya'll.

I've been trying to figure out how to trigger the react css transition group on scroll. Say i've got a stack of ponents and this example gets rendered off screen :

// ponent.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;
}

I want the transition group to be triggered when it enters the View and not just when the ponent is initially rendered. I've been mulling over the docs and exploring pre-made libraries / ponents to acplish this but have not found anything that doesn't involve bringing in huge animation libraries... I know deep in my cockles there is a way to do this, hence, asking the pros here. Cheers ya'll.

• javascript
• css
• reactjs
• reactcsstransitiongroup

Share Improve this question Follow edited Mar 6, 2017 at 19:04 rimraf asked Mar 5, 2017 at 18:38 rimrafrimraf 4,13777 gold badges3232 silver badges5656 bronze badges 2

• You mean when it is visible to the user (i.e is inside the viewport?). – Chris Commented Mar 5, 2017 at 19:21
• Yes. Exactly. Viewport – rimraf Commented Mar 5, 2017 at 19:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Just throwing out an idea:

Use https://github./brigade/react-waypoint to add your ponent to the DOM when you scroll to a specific element.

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

In your handleWaypointEnter , add your <ReactCSSTransitionGroup>...</ReactCSSTransitionGroup> to the dom. This should work, according to the docs it applies animations upon entering the dom.