2017-04-09

React.js開發入門教學(10)-動畫特效

在原本我們使用的CSS特效，在React上被整合的更好使用了。為什麼這麼說？因為我們知道

原本的寫法都是針對某個class或是id、name等等去做觸發事件或是變換的特效。也就是會

要針對某個標籤塞一堆class進去。在React中我們可以利用addon的CSSTransitionGroup

來幫我們做這件事情，也就是說不需要我們自己寫一堆class名稱就可以辦到！首先我們先把原

本ＨＴＭＬ中預先載入的react.js換成帶有addon的版本

<script src="https://unpkg.com/react@15/dist/react.js"></script>

換成

<script src="https://unpkg.com/react@15/dist/react-with-addons.js"></script>

接著我們寫上我們希望的ＣＳＳ特效

//這是定義進入特效時的效果
.example-enter {
    opacity: 0;
}
//這是定義特效執行後的效果
.example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 1500ms ease-in;
}
//這是定義離開特效時的效果
.example-leave {
    opacity: 1;
}
//這是定義離開特效執行後的效果
.example-leave.example-leave-active {
    opacity: 0;
    transition: opacity 1ms ease-in;
}
//這是定義預設載入時的效果
.example-appear {
    opacity: 0;
}
//這是定義預設載入執行後的效果
.example-appear.example-appear-active {
    opacity: 1;
    transition: opacity 1s ease-in;
}

然後寫下以下代碼

//不要忘記要先include這項addon
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

class Anime extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            checked: false,
            text: '初始值'
        }
    }
    check_change(Event) {
        if(Event.target.checked) {
            this.setState({checked: Event.target.checked, text: '出現了'})
        } else {
            this.setState({checked: Event.target.checked, text: ''})
        }
    }
    render() {
        //注意！這裡h1的KEY屬性一定要給React是根據key的變化來判定什麼時候進行動畫特效的
        return(
            <div>
            <input id="123" name="recipient-name" type="checkbox" checked={this.state.checked} onChange={this.check_change.bind(this)}/><label htmlFor="123">變換</label><br/>
            <ReactCSSTransitionGroup
                transitionName="example"
                transitionAppear={true}
                transitionAppearTimeout={1500}
                transitionEnter={true}
                transitionEnterTimeout={1500}
                transitionLeave={true}
                transitionLeaveTimeout={300}>
            <h1 key={this.state.checked}>{this.state.text}</h1>
            </ReactCSSTransitionGroup>
            </div>
        )
    }
}

ReactDOM.render(
    <Anime />,
    document.getElementById('test')
)

我們可以看到ReactCSSTransitionGroup標籤中有很多屬性，其實看名稱就知道是做什麼的，比較要注意的一點是transitionName

屬性對應到的是你CSS中的名稱，也就是你這裡名稱為「test」的時候，那你css表應該寫成「.test-enter」！這樣就可以

對我們要的標籤做css特效變化啦！是不是比原本jQuery要寫什麼$(‘test’).addClass()來的直覺一點呢？

不過眼尖的人應該會發現，當你每次在執行變換的時候，其實，會有一小段時間原有的標籤會停留在畫面上，導致變化起來沒那麼好看，

解決方法我還在找…不過入門學習就到此為止啦！接下來我要邁向ReactNative來學習寫APP了！:P

React