rc-tween-one@2.7.3

tween-one anim component for react

import Tween from 'rc-tween-one';
import React from 'react';
import ReactDom from 'react-dom';
import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';

function Demo() {
  return (
    <div>
      <div style={{ height: 800 }}>往下滚动</div>
      <ScrollOverPack
        style={{ height: 800 }}
      >
        <Tween
          key="1"
          animation={{ y: 30, type: 'from', ease: 'easeOutQuart', opacity: 0 }}
          reverseDelay={200}
          style={{ background: '#fff000' }}
        >
          执行动画
        </Tween>
        <Tween
          key="2"
          id="12"
          animation={{ y: 30, delay: 100, ease: 'easeOutQuart', type: 'from', opacity: 0, id: 12 }}
          reverseDelay={100}
          style={{ background: '#000fff' }}
        >
          执行动画
        </Tween>
      </ScrollOverPack>
    </div>);
}

ReactDom.render(<Demo />, document.getElementById('__react-content'));
Fork me on GitHub