update 0.10.0

Author: jljsj33

README.md

@@ -116,10 +116,10 @@ React.render(<TweenOneGroup>
 | yoyo       | boolean        | false   | if `true`, every other repeat cycle will run in the opposite direction so that the tween appears to go back and forth (forward then backward).  |
 | ease       | string         | `easeInOutQuad` | animate ease. [refer](http://easings.net/en)  |
 | bezier     | object         | null    | bezier curve animate |
-| onStart    | func           | null    | A function that should be called when the tween begins  |
-| onUpdate   | func           | null    | A function that should be called every time the animate updates  |
-| onComplete | func           | null    | A function that should be called when the animate has completed  |
-| onRepeat   | func           | null    | A function that should be called each time the animate repeats  |
+| onStart    | func           | null    | A function that should be called when the tween begins, callback(e), e: { index, target }  |
+| onUpdate   | func           | null    | A function that should be called every time the animate updates, callback(e), e: { index, target,  ratio }   |
+| onComplete | func           | null    | A function that should be called when the animate has completed, callback(e), e: { index, target }  |
+| onRepeat   | func           | null    | A function that should be called each time the animate repeats, callback(e), e: { index, target }  |
 
 
 
@@ -157,4 +157,5 @@ svg polygon or path values: polygon is points, path is d; [demo](http://react-co
 | leave     | object / array / func | `{ x: 30, opacity: 0 }` | leave anim twee-one data. when array is tween-one timeline, func refer to queue-anim  |
 | onEnd     |  func          | -    | one animation end callback |
 | animatingClassName | array | `['tween-one-entering', 'tween-one-leaving']` | className to every element of animating |
+| resetStyleBool   |  boolean   | true  | whether to animation reset the style every time |
 | component | 	React.Element/String | div  |  component tag  | 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-tween-one",
-  "version": "0.9.5",
+  "version": "0.10.0",
   "description": "tween-one anim component for react",
   "keywords": [
     "react",

src/TimeLine.js

@@ -224,18 +224,22 @@ p.render = function () {
         return;
       }
     }
+    const e = {
+      index: i,
+      target: this.target,
+    };
     // onRepeat 处理
     if (item.repeat && repeatNum > 0
       && progressTime + fromDelay >= 0 && progressTime < this.perFrame) {
       // 重新开始, 在第一秒触发时调用;
-      item.onRepeat();
+      item.onRepeat(e);
     }
     if (progressTime < 0 && progressTime + fromDelay > -this.perFrame) {
       this.setRatio(item.type === 'from' ? 1 : 0, item, i);
     } else if (progressTime >= duration && item.mode !== 'onComplete') {
       this.setRatio(item.type === 'from' || (repeatNum % 2 && item.yoyo) ? 0 : 1, item, i);
       if (item.mode !== 'reset') {
-        item.onComplete();
+        item.onComplete(e);
       }
       item.mode = 'onComplete';
     } else if (progressTime >= 0 && progressTime < duration) {
@@ -248,19 +252,16 @@ p.render = function () {
       }
       this.setRatio(ratio, item, i);
       if (progressTime <= this.perFrame) {
-        item.onStart();
+        item.onStart(e);
       } else {
-        item.onUpdate(ratio);
+        item.onUpdate({ ratio, ...e });
       }
     }
     if (progressTime >= 0 && progressTime < duration + this.perFrame) {
       this.onChange({
         moment: this.progressTime,
-        item,
-        tween: this.tween,
-        index: i,
         mode: item.mode,
-        target: this.target,
+        ...e,
       });
     }
   });

src/TweenOne.jsx

@@ -21,13 +21,6 @@ class TweenOne extends Component {
     this.paused = this.props.paused;
     this.reverse = this.props.reverse;
     this.onChange = this.props.onChange;
-    [
-      'raf',
-      'frame',
-      'start',
-      'play',
-      'restart',
-    ].forEach((method) => this[method] = this[method].bind(this));
   }
 
   componentDidMount() {
@@ -108,13 +101,13 @@ class TweenOne extends Component {
     this.cancelRequestAnimationFrame();
   }
 
-  restart() {
+  restart = () => {
     this.startMoment = this.timeLine.progressTime;
     this.startFrame = ticker.frame;
     this.play();
   }
 
-  start() {
+  start = () => {
     const props = this.props;
     if (props.animation && Object.keys(props.animation).length) {
       this.timeLine = new TimeLine(this.dom, dataToArray(props.animation), props.attr);
@@ -125,15 +118,15 @@ class TweenOne extends Component {
     }
   }
 
-  play() {
+  play = () => {
     this.cancelRequestAnimationFrame();
     if (this.paused) {
       return;
     }
     this.rafID = ticker.add(this.raf);
   }
 
-  frame() {
+  frame = () => {
     let moment = (ticker.frame - this.startFrame) * perFrame + (this.startMoment || 0);
     if (this.reverse) {
       moment = (this.startMoment || 0) - (ticker.frame - this.startFrame) * perFrame;
@@ -148,15 +141,15 @@ class TweenOne extends Component {
     this.timeLine.frame(moment);
   }
 
-  raf() {
+  raf = () => {
     this.frame();
     if ((this.moment >= this.timeLine.totalTime && !this.reverse)
       || this.paused || (this.reverse && this.moment === 0)) {
       return this.cancelRequestAnimationFrame();
     }
   }
 
-  cancelRequestAnimationFrame() {
+  cancelRequestAnimationFrame = () => {
     ticker.clear(this.rafID);
     this.rafID = -1;
   }

src/TweenOneGroup.jsx

@@ -21,20 +21,9 @@ class TweenOneGroup extends Component {
     this.isTween = {};
     // 第一进入，appear 为 true 时默认用 enter 或 tween-one 上的效果
     const children = toArrayChildren(getChildrenFromProps(this.props));
-    children.forEach(child => {
-      if (!child || !child.key) {
-        return;
-      }
-      this.keysToEnter.push(child.key);
-    });
     this.state = {
       children,
     };
-    [
-      'getChildrenToRender',
-      'getCoverAnimation',
-      'onChange',
-    ].forEach((method) => this[method] = this[method].bind(this));
   }
 
   componentDidMount() {
@@ -43,7 +32,7 @@ class TweenOneGroup extends Component {
 
   componentWillReceiveProps(nextProps) {
     const nextChildren = toArrayChildren(nextProps.children);
-    const currentChildren = this.state.children;
+    const currentChildren = toArrayChildren(this.state.children);
     const newChildren = mergeChildren(currentChildren, nextChildren);
 
     this.keysToEnter = [];
@@ -74,27 +63,27 @@ class TweenOneGroup extends Component {
     });
   }
 
-  onChange(animation, key, type, obj) {
+  onChange = (animation, key, type, obj) => {
     const length = dataToArray(animation).length;
     const animatingClassName = this.props.animatingClassName;
     const tag = obj.target;
+    const isEnter = type === 'enter' || type === 'appear';
     if (obj.mode === 'onStart') {
       tag.className = tag.className
-        .replace(animatingClassName[type === 'enter' ? 1 : 0], '').trim();
-      if (tag.className.indexOf(animatingClassName[type === 'enter' ? 0 : 1]) === -1) {
-        tag.className = `${tag.className} ${animatingClassName[type === 'enter' ? 0 : 1]}`.trim();
+        .replace(animatingClassName[isEnter ? 1 : 0], '').trim();
+      if (tag.className.indexOf(animatingClassName[isEnter ? 0 : 1]) === -1) {
+        tag.className = `${tag.className} ${animatingClassName[isEnter ? 0 : 1]}`.trim();
       }
     } else if (obj.index === length - 1 && obj.mode === 'onComplete') {
-      let children;
+      let children = this.state.children;
       if (type === 'enter') {
-        children = this.state.children;
         this.keysToEnter.splice(this.keysToEnter.indexOf(key), 1);
-      } else {
+      } else if (type === 'leave') {
         children = this.state.children.filter(child => key !== child.key);
         this.keysToLeave.splice(this.keysToLeave.indexOf(key), 1);
       }
       tag.className = tag.className
-        .replace(animatingClassName[type === 'enter' ? 0 : 1], '').trim();
+        .replace(animatingClassName[isEnter ? 0 : 1], '').trim();
       delete this.isTween[key];
       this.setState({
         children,
@@ -104,38 +93,46 @@ class TweenOneGroup extends Component {
     }
   }
 
-  getCoverAnimation(child, i, type) {
+  getCoverAnimation = (child, i, type) => {
     let animation;
     let onChange;
-    const appear = transformArguments(this.props.appear, child.key, i);
-    if (appear || this.onEnterBool) {
-      animation = type === 'leave' ? this.props.leave : this.props.enter;
-      onChange = this.onChange.bind(this, animation, child.key, type);
+    animation = type === 'leave' ? this.props.leave : this.props.enter;
+    if (type === 'appear') {
+      const appear = transformArguments(this.props.appear, child.key, i);
+      animation = appear && this.props.enter || null;
     }
+    onChange = this.onChange.bind(this, animation, child.key, type);
     const children = (<TweenOne
       {...child.props}
       key={child.key}
       component={child.type}
       animation={transformArguments(animation, child.key, i)}
       onChange={onChange}
-      resetStyleBool={child.key in this.isTween}
+      resetStyleBool={this.props.resetStyleBool}
     />);
-    if (this.keysToEnter.concat(this.keysToLeave).indexOf(child.key) >= 0) {
-      this.isTween[child.key] = true;
+    if (this.keysToEnter.concat(this.keysToLeave).indexOf(child.key) >= 0
+      || !this.onEnterBool && animation) {
+      this.isTween[child.key] = type;
     }
     return children;
   }
 
-  getChildrenToRender(children) {
+  getChildrenToRender = children => {
     return children.map((child, i) => {
       if (!child || !child.key) {
         return child;
       }
       const key = child.key;
       if (this.keysToLeave.indexOf(key) >= 0) {
         return this.getCoverAnimation(child, i, 'leave');
+      } else if (this.keysToEnter.indexOf(key) >= 0) {
+        return this.getCoverAnimation(child, i, 'enter');
+      } else if (!this.onEnterBool) {
+        return this.getCoverAnimation(child, i, 'appear');
       }
-      return this.getCoverAnimation(child, i, 'enter');
+      return this.isTween[child.key] &&
+        this.getCoverAnimation(child, i, this.isTween[child.key]) ||
+        React.createElement(TweenOne, { ...child.props, component: child.type, key: child.key });
     });
   }
 
@@ -152,6 +149,7 @@ class TweenOneGroup extends Component {
       'leave',
       'animatingClassName',
       'onEnd',
+      'resetStyleBool',
     ].forEach(key => delete componentProps[key]);
     return createElement(this.props.component, componentProps, childrenToRender);
   }
@@ -169,6 +167,7 @@ TweenOneGroup.propTypes = {
   leave: objectOrArrayOrFunc,
   animatingClassName: PropTypes.array,
   onEnd: PropTypes.func,
+  resetStyleBool: PropTypes.bool,
 };
 
 TweenOneGroup.defaultProps = {
@@ -178,5 +177,6 @@ TweenOneGroup.defaultProps = {
   enter: { x: 50, opacity: 0, type: 'from' },
   leave: { x: -50, opacity: 0 },
   onEnd: noop,
+  resetStyleBool: true,
 };
 export default TweenOneGroup;

src/util.js

@@ -100,6 +100,7 @@ export function mergeChildren(prev, next) {
   // the combined list
   const nextChildrenPending = {};
   let pendingChildren = [];
+  let followChildrenKey;
   prev.forEach((c) => {
     if (!c) {
       return;
@@ -109,10 +110,14 @@ export function mergeChildren(prev, next) {
         nextChildrenPending[c.key] = pendingChildren;
         pendingChildren = [];
       }
+      followChildrenKey = c.key;
     } else if (c.key) {
       pendingChildren.push(c);
     }
   });
+  if (!followChildrenKey) {
+    ret = ret.concat(pendingChildren);
+  }
 
   next.forEach((c) => {
     if (!c) {
@@ -122,13 +127,8 @@ export function mergeChildren(prev, next) {
       ret = ret.concat(nextChildrenPending[c.key]);
     }
     ret.push(c);
-  });
-
-  // 保持原有的顺序
-  pendingChildren.forEach((c) => {
-    const originIndex = prev.indexOf(c);
-    if (originIndex >= 0) {
-      ret.splice(originIndex, 0, c);
+    if (c.key === followChildrenKey) {
+      ret = ret.concat(pendingChildren);
     }
   });