滚动触发ReactCSSTransitionGroup

我一直在试图弄清楚如何在滚动上触发反应CSS转换组。说我有分量的堆栈，这个例子被渲染关闭屏幕：滚动触发ReactCSSTransitionGroup

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

我想要的过渡组在它进入查看时触发，而不仅仅是当组件初始渲染时。我一直在研究文档和探索预先制作的库/组件来完成这个任务，但没有发现任何不涉及带来巨大的动画库......我知道深在我的鸟蛤有一种方式做到这一点，因此，在这里问专业人士。欢呼你们。

来源

2017-03-05 archae0pteryx

你的意思是用户可以看到它（即在视口内？）。 – Chris

是的。究竟。视口 – archae0pteryx

只是抛出一个想法：

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

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

在你handleWaypointEnter，添加<ReactCSSTransitionGroup>...</ReactCSSTransitionGroup>到DOM。这应该工作，根据docs它进入dom时应用动画。

来源

2017-03-06 19:01:13 sturdynut

是的。目前使用航点。大声笑。我大多只关心滚动触发组件加载和卸载的实际机制。我需要弄清楚一个更简明的方式来显示/询问现在我有更多的阅读。你绝对是对的！航点。解决了！ – archae0pteryx

https://gist.github.com/anonymous/c0c98dd963809185f6cfe3cc1009f6db – archae0pteryx

滚动触发ReactCSSTransitionGroup

回答

相关问题