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/index.js:10
Module: 辅助组件

Available since 1.0.0

Constructor

Animate

Animate ()

Defined in src/animate/index.js:10

Available since 1.0.0

Example:

import React, { Component } from "react"

import Row from "phoenix-ui/lib/grid/Row"
import Col from "phoenix-ui/lib/grid/Col"
import Input from "phoenix-ui/lib/input"
import Button from "phoenix-ui/lib/button"
import List from "phoenix-ui/lib/list"
import Animate from "phoenix-ui/lib/animate"
import Code from "./code/code"

export default class animate extends Component{

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

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

    addTodo(){
        let newList = this.state.list.concat(this.input.getValueCallback())

        this.setState({
            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 (
                <List.Item key={index} className="animated" onClick={this.removeTodo.bind(this,index).bind(this)}>
                    <List.Col>{item}</List.Col>
                </List.Item>
            )
        })
        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 width="80">
                            <Input type="text" ref={(input)=>{this.input=input}}/>
                        </Col>
                        <Col>
                            <Button phStyle="primary" onClick={this.addTodo.bind(this)} >Add</Button>
                        </Col>
                    </Row>
                </div>
                <List>
                    <Animate transitionName="fade" className="animate-field">
                        {this.renderList()}
                    </Animate>
                </List>
                <Code target="animate" />             
            </div>
        )
    }
}

属性

transitionEnterTimeout

Number

Defined in src/animate/index.js:53

动画进入延迟时间

transitionLeaveTimeout

Number

Defined in src/animate/index.js:59

动画退出延迟时间

transitionName

String

Defined in src/animate/index.js:46

动画名称,默认fade

Default:

'fade'