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 '';
        }
    }
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'