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

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

# Transiton 变换

- order: 0
- title_en: transform demo

---
```js
/** @jsx createElement */
import { View, Text, Image, Env, Page, Transition, Button } from 'weex-nuke';

<NukePlayGround>
    Transition(box, styles, {
        timingFunction: 'ease-in-out',//ease-in,ease-in-out,ease-out,linear,cubic-bezier
        delay: 0,
        duration: 200
    }, function() {
        cb && cb.call(this);
    })
</NukePlayGround>
```
---

````js
import {createElement, Component,findDOMNode,render} from 'rax';
const { isWeex, isWeb } = Env;

let App = class NukeDemoIndex extends Component {
    constructor() {

        super();
        this.state={
            scale:true,
            translate:true,
            rotate:true,
            opacity:true,
            showOverlay:false
        }
    }
    transition=(styles,cb)=>{
        const box = findDOMNode(this.refs.box);
        Transition(box, styles, {
            timingFunction: 'ease-in-out',//ease-in,ease-in-out,ease-out,linear,cubic-bezier
            delay: 0,
            duration: 200
        }, function() {
            cb && cb.call(this);
        });

    }
    scale=()=>{
        let styles = this.state.scale ? {transform: 'scale(1.5, 1.5)'} : {transform: 'scale(1, 1)'}
        
        this.transition(styles,()=>{
            this.setState({scale : !this.state.scale})
        })
    }
    translate=()=>{
        // 150 单位是rem，组件将自动在 h5 下转换为对应的 px 值并加上 px 单位
        let styles = this.state.translate ? {transform: 'translate(150rem, 150rem)'} : {transform: 'translate(0, 0)'}
        
        
        this.transition(styles,()=>{
            this.setState({translate : !this.state.translate})
        })
    }
    rotate=()=>{
        let styles = this.state.rotate ? {transform: 'rotate(720deg)'} : {transform: 'rotate(0)'}
        
        this.transition(styles,()=>{
            this.setState({rotate : !this.state.rotate})
        })
    }
    opacity=()=>{
        let styles = this.state.opacity ? {opacity: '0.5'} : {opacity: '1'}
        
        this.transition(styles,()=>{
            this.setState({opacity : !this.state.opacity})
        })
    }

       
    render() {
        return (
            <Page title="Transition">
                <Page.Intro main="基础用法"></Page.Intro>
                <View style={styles.wrapper}>
                    <View ref="box" style={styles.box}>
                       
                    </View>
                </View>
                <Button.Group style={styles.btnblock}>
                    <Button type="primary" onPress={this.scale.bind(this)}>缩放</Button>
                    <Button type="primary" onPress={this.translate.bind(this)}>变换</Button>
                    <Button type="primary" onPress={this.rotate.bind(this)}>旋转</Button>
                    <Button type="primary" onPress={this.opacity.bind(this)}>透明度</Button>
                </Button.Group>

            </Page>

        );
    }
}
const styles={
    wrapper:{
        height:'600rem',
        borderWidth:1,
        borderStyle:'dashed',
        borderColor:'#cccccc',
        alignItems: 'center',
        margin:'20rem',
        justifyContent: 'center',
    },
    
    box:{
        width: '280rem',
        height: '80rem',
        backgroundColor:'#3089dc',
        borderRadius: '40rem',
    },
    pic:{
        width:'160rem',
        height:'160rem',
    },
    st:{
        marginTop:'30rem',
        marginBottom:'30rem',
        paddingTop:'10rem',
        paddingBottom:'10rem',
        paddingLeft:'20rem',
        backgroundColor:'#dddddd'
    },
    stText:{
        fontSize:'36rem'
    },
    btn:{
        marginRight:'20rem'
    },
    btnblock:{
        marginTop:'20rem'
    },
    overlay:{
        width:'750rem',
        position:'absolute',
        left:0,
        opacity:0,
        height:400,
        alignItems: 'center',
        justifyContent: 'center',
        // display:'none',
        backgroundColor:'#dddddd',
        bottom:'-400rem',
        
    }
}
render(<App/>);
````