# Animate

动画外层组件

- 使用时需要在子元素增加animated类名实现动画效果, animated定义的是过渡的duration和fill-mode, 默认300ms, 完全可以自定义。
- 可通过transitionName设置动画名称, 可选fade、slide-top、slide-bottom(还将补充), 默认fade。
- 可通过transitionEnterTimeout设置进入延迟时间。
- 可通过transitionLeaveTimeout设置离开延迟时间。

示例:

        <Animate className='popup-content' transitionName='slide-top'>
            {this.renderPopup()}
        </Animate>

        renderPopup(){
            let {visible,children,className} = this.props;
            if(visible){
                return <div {...this.props} className={'popup-main', 'animated', className)}>{children}</div>;
            }else{
                return '';
            }
        }

### 方法

### 属性

- transitionEnterTimeout
- transitionLeaveTimeout
- transitionName

### 事件

Extends Component
Defined in: `src/Animate.js:5`
Module: 辅助组件

Available since 1.0.0

## Constructor

### Animate

`Animate ()`

Defined in `src/Animate.js:5`

Available since 1.0.0

#### Example:

    import React, { Component } from "react";
    import {Row,Col,Input,Button,Animate} from "phoenix-ui";
    import Code from "./code/code";

    export default class animate extends Component{

        constructor(props,context){
            super(props,context);

            this.state = {
                item: "",
                list: ["看一本书","睡8个小时"]
            }
        }

        setValue(key,e){
            let o ={};
            o[key || e.target.name] = e.target.value;
            this.setState(o);
        }

        addTodo(){
            let newList = this.state.list.concat(this.state.item);

            this.setState({
                item: "",
                list: newList
            });
        }

        removeTodo(index){
            let newList = this.state.list.slice();

            newList.splice(index,1);
            this.setState({
                list: newList
            });
        }

        renderList(){
            const items = this.state.list.map((item,index)=>{
                return <div key={index} className="animated" onClick={::this.removeTodo.bind(this,index)}>{item}</div>;
            });
            return items;
        }

        render(){

            return(
                <div>
                    <h2 className="comp-title">Animate</h2>
                    <h3 className="comp-type">Todo demo</h3>
                    <div className="content ph-row-no-padding todo-demo">
                        <Row>
                            <Col className="ph-col-80">
                                <Input type="text" value={this.state.item} onChange={::this.setValue.bind(this,"item")} />
                            </Col>
                            <Col>
                                <Button block phSize="lg" phStyle="primary" onClick={::this.addTodo} >Add</Button>
                            </Col>
                        </Row>
                        <Animate transitionName="fade" className="animate-field">
                            {this.renderList()}
                        </Animate>
                    </div>
                    <br/>
                    <Code target="animate" />
                </div>
            );
        }
    }

## 属性

### `transitionEnterTimeout`

Number

Defined in `src/Animate.js:48`

动画进入延迟时间

### `transitionLeaveTimeout`

Number

Defined in `src/Animate.js:54`

动画退出延迟时间

### `transitionName`

String

Defined in `src/Animate.js:41`

动画名称,默认fade

Default:

`'fade'`