ant-design/components/enter-animation/demo/label.md
2015-07-28 15:42:43 +08:00

5.7 KiB

主标签控制动画

  • order: 1

主标签上控制进场, EnterAnimation 里延时1秒,递增interval为0.2;



var EnterAnimation = antd.EnterAnimation;
var Test = React.createClass({
  render() {
    return (
    <EnterAnimation className="demo-startAnim" delay={1} interval={.2}>
        <div className="demo-header">
            <div className="logo">
                <img width="30" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
                <span>logo</span>
            </div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div className="demo-content">
            <div className="demo-title">我是标题</div>
            <div className="demo-kp">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div className="demo-title">我是标题</div>
            <div className="demo-listBox">
                <ul>
                    <li>
                        <div className="demo-list">
                            <div className="title"></div>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div className="demo-list">
                            <div className="title"></div>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div className="demo-footer" style={{"width": "100%", "display": "table", "float": "left"}}></div>
    </EnterAnimation>)
  }
});
React.render(<Test/> , document.getElementById('components-enter-animation-demo-label'));