2016-03-03 17:23:08 +08:00
|
|
|
|
import React from 'react';
|
|
|
|
|
|
import { Link } from 'react-router';
|
|
|
|
|
|
import TweenOne from 'rc-tween-one';
|
|
|
|
|
|
import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
|
2016-03-30 19:14:09 +08:00
|
|
|
|
import { Icon, Button } from '../../../';
|
|
|
|
|
|
import QueueAnim from 'rc-queue-anim';
|
2016-03-03 17:23:08 +08:00
|
|
|
|
|
|
|
|
|
|
export default class Page2 extends React.Component {
|
|
|
|
|
|
render() {
|
|
|
|
|
|
return (
|
|
|
|
|
|
<ScrollOverPack scrollName="page2" className="content-wrapper page" playScale={1} replay>
|
|
|
|
|
|
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type="bottom"
|
|
|
|
|
|
leaveReverse
|
|
|
|
|
|
hideProps={{ child: null }}>
|
|
|
|
|
|
<h2 key="h2">设计模式</h2>
|
|
|
|
|
|
<p key="p" style={{ maxWidth: 260 }}>总结中后台设计中反复出现的问题，并提供相应的解决方案。</p>
|
|
|
|
|
|
<div key="button">
|
2016-03-23 14:20:24 +08:00
|
|
|
|
<Link to="/docs/pattern/navigation">
|
2016-03-03 17:23:08 +08:00
|
|
|
|
<Button type="primary" size="large">
|
|
|
|
|
|
了解更多
|
|
|
|
|
|
<Icon type="right" />
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
</Link>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</QueueAnim>
|
|
|
|
|
|
<TweenOne key="image" className="image2 image-wrapper" vars={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
|
|
|
|
|
|
style={{ transform: 'translateX(100px)', opacity: 0 }} hideProps={{ type: 'reverse' }} />
|
|
|
|
|
|
</ScrollOverPack>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
