使用React JS滚动动画

Question

我想使用React JS在滚动上添加一些动画。我的导航如下：

render(){
  return (
       <ul className="noPadding">
           <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, refs.home)}>Home </Link></li>
           <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, refs.whyUs)}>Kenmerken </Link></li>
           <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, refs.benefits)}>Voordelen </Link></li>
           <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, refs.whoAreWe)}>Wie zijn wij?</Link></li>
           <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, refs.contact)}>Contact </Link></li>
       </ul>
  )
}

并且处理滚动功能如下：

 handleScroll(ref, event){
    event.preventDefault();
    let offset = this.props.offsets.offsets[ref];
    window.scrollTo(0, offset);
}

这很好用，当我点击链接时，我会看到我想要的部分。

但我想添加一些动画。我不想要使用jquery。

有关如何执行此操作的建议吗？