weex-nuke/docs/transition/demo/overlay.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Transiton Demo

- order: 1

使用 Transition 实现一个简单的浮层面板

---

````js
/** @jsx createElement */
import { View, Dimensions, Transition, Button, Text } from 'weex-nuke';
import {createElement, Component,render,findDOMNode} from 'rax';
const {width, height } = Dimensions.get('window');

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.state ={
            showSide:false,
        }
    }
    transition=(box,styles,cb)=>{
        Transition(box, styles, {
            timingFunction: 'ease-in-out',//ease-in,ease-in-out,ease-out,linear,cubic-bezier
            delay: 0,
            duration: 100
        }, function() {
            cb && cb.call(this);
        });

    }
    showSide=()=>{
        let styles = this.state.showSide ? {transform: 'translateX(0)'} : {transform: 'translateX(200)'}
        let box = findDOMNode(this.refs.side);
        this.transition(box,styles,()=>{
            this.setState({showSide : !this.state.showSide})
        })
    }
    render() {
        return (
            <View style={styles.container}>
                
                <View x="main" ref="main" style={styles.main}>
                    <Button type="primary" onPress={this.showSide}>展开/折叠面板</Button>
                </View>
                <View x="side" ref="side" style={styles.side}>
                    <View style={styles.menu}><Text style={styles.menuText}>1个内容</Text></View>
                    <View style={styles.menu}><Text style={styles.menuText}>2个内容</Text></View>
                    <View style={styles.menu}><Text style={styles.menuText}>3个内容</Text></View>
                </View>
                
            </View>
            
        );
    }
}
const styles={
    container:{
        flex:1,
        position:'relative',
        flexDirection:'row'
    },
    side:{
        width:200,
        left:-200,
        top:0,
        position:'absolute',
        height:parseInt(height,10),
        backgroundColor:'#3089dc'
    },
    main:{
        width:width,
        height:height,
        justifyContent:'center',
        backgroundColor:'#eeeeee'
    },
    menu:{
        height:80,
        justifyContent:'center',
        // alignItems:'center',
        paddingLeft:20,

    },
    menuText:{
        color:'#ffffff',
    }
}
render(<App />);
````