?

ReactJS學習筆記八：動畫

分類：?react學習筆記?javascript2015-07-06 20:27?321人閱讀?評論(0)?收藏?舉報 react動畫

目錄(?)[+]

這里只討論React的一個動畫插件提供的動畫機制，其他的通過自己寫JS操作的動畫都是一樣的，和React沒啥關系。

React.addons.CSSTransitionGroup 提供了一個分組動畫，所謂分組動畫就是指它可以對一個數組中的元素的增加和減少做一個動畫。?
比如我們通過一個數組來渲染一個列表，那么當列表增加或者減少的時候我們可以定義他的動畫。

動畫原理

React.addons.CSSTransitionGroup?的原理非常簡單，通過?CSSTransitionGroup?標簽來指定對一個DOM列表進行動畫操作，通過?transitionName='my-animate-name'?來指定動畫的名稱。

當增加一項時，會自動在增加的那一項上增加兩個類：?{name}-enter?和?{name}-enter-active。CSS動畫執行結束之后這兩個類會被刪掉。其中?{name}-enter?會在?{name}-enter-active?的前一幀被加上。因此{name}-enter?用來定義動畫的初始狀態，{name}-enter-active?用來定義動畫的結束狀態。

當減少一項時，會自動在刪除之前增加一個?{name}-leave?和?{name}-leave-active?類，這倆著的區別和前面的是一樣的。

所以可以通過CSS3來寫動畫。

簡單示例

我們來寫一個簡單的動畫示例。顯示一個學生列表，然后定時增加一條，在增加的時候使用一個fade動畫。點擊的時候做一個放大并漸變的消失動畫：

下面是JSX代碼:

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;var Students = React.createClass({getInitialState: function() {return {students: ['amy', 'bob', 'tom', 'lucy']};},componentDidMount: function() {var self = this;var update = function() {self.setState({students: self.state.students.concat(["unamed-"+parseInt(Math.random()*10000000)])});}setInterval(update, 1000);},handleRemove: function(e) {var name = $(e.target).data("name");var index = 0;var students = this.state.students;for(var i=0;i<students.length;i++) {if(students[i] == name) index = i;}var state = this.state.students.splice(index, 1);this.setState({state: state});},render: function() {var s = this.state.students;var self = this;return (<div><ReactCSSTransitionGroup transitionName="student">{s.map(function(d, i) {return <div className='student' key=ze8trgl8bvbq>ze8trgl8bvbq <a onClick={self.handleRemove} data-name=ze8trgl8bvbq>刪除</a></div>})}</ReactCSSTransitionGroup></div>);}});React.render(<Students />,document.getElementById("div1"));

下面是css代碼：

.student {float: left;margin: 20px;}.student-enter {opacity: .2;transition: opacity 1s;}.student-enter-active {opacity: 1;}.student-leave {transform: scale(1);opacity: 1;transition: all .5s ease-in;}.student-leave-active {transform: scale(5);opacity: 0;}

版權聲明：本文為博主原創文章，未經博主允許不得轉載。

轉載于:https://www.cnblogs.com/HuiLove/p/4849549.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的ReactJS学习笔记八：动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。