Merge pull request #19 from react-component/0.12.0

jljsj33 · web-flow · commit 5f8bebebe7a1 · 2016-07-25T11:56:09.000+08:00
bump 0.12.0-beta.0
diff --git a/assets/switch.less b/assets/switch.less
@@ -0,0 +1,19 @@
+.switch {
+  height: 400px;
+  background: #CCC;
+  & ul {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    & li {
+      list-style: none;
+      height: 100px;
+      width: 100px;
+      float: left;
+      background: #000;
+      &:nth-child(2n) {
+        background: #ff6600;
+      }
+    }
+  }
+}
diff --git a/examples/switch-enterForcedRePlay.html b/examples/switch-enterForcedRePlay.html
@@ -0,0 +1 @@
+placeholder
diff --git a/examples/switch-enterForcedRePlay.js b/examples/switch-enterForcedRePlay.js
@@ -0,0 +1,58 @@
+/* eslint-disable no-console,react/no-multi-comp */
+import QueueAnim from 'rc-queue-anim';
+import React from 'react';
+import ReactDom from 'react-dom';
+import '../assets/switch.less';
+
+class Demo extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.childrenKey = [
+      { key: 1 },
+      { key: 2 },
+      { key: 3 },
+      { key: 4 },
+      { key: 5 },
+      { key: 6 },
+    ];
+    this.state = {
+      childrenKey: this.childrenKey,
+    };
+  }
+
+  onEnter = () => {
+    this.setState({
+      childrenKey: null,
+    });
+  };
+
+  onLeave = () => {
+    this.setState({
+      childrenKey: this.childrenKey,
+    });
+  };
+
+  getChildren = () => {
+    return (this.state.childrenKey || []).map(item => {
+      return (<li key={item.key} />);
+    });
+  };
+
+  render() {
+    const childrenToRender = this.getChildren();
+    return (<div className="switch" onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
+      <h2>鼠标经过当前区域，再移出区域查看</h2>
+      <QueueAnim component="ul" leaveReverse delay={[0, 300]} type="scale" enterForcedRePlay>
+        {childrenToRender}
+      </QueueAnim>
+      <QueueAnim component="ul" leaveReverse delay={150} type="scale" enterForcedRePlay>
+        {childrenToRender}
+      </QueueAnim>
+      <QueueAnim component="ul" leaveReverse delay={[300, 0]} type="scale" enterForcedRePlay>
+        {childrenToRender}
+      </QueueAnim>
+    </div>);
+  }
+}
+
+ReactDom.render(<Demo />, document.getElementById('__react-content'));
diff --git a/examples/switch.html b/examples/switch.html
@@ -0,0 +1 @@
+placeholder
diff --git a/examples/switch.js b/examples/switch.js
@@ -0,0 +1,58 @@
+/* eslint-disable no-console,react/no-multi-comp */
+import QueueAnim from 'rc-queue-anim';
+import React from 'react';
+import ReactDom from 'react-dom';
+import '../assets/switch.less';
+
+class Demo extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.childrenKey = [
+      { key: 1 },
+      { key: 2 },
+      { key: 3 },
+      { key: 4 },
+      { key: 5 },
+      { key: 6 },
+    ];
+    this.state = {
+      childrenKey: this.childrenKey,
+    };
+  }
+
+  onEnter = () => {
+    this.setState({
+      childrenKey: null,
+    });
+  };
+
+  onLeave = () => {
+    this.setState({
+      childrenKey: this.childrenKey,
+    });
+  };
+
+  getChildren = () => {
+    return (this.state.childrenKey || []).map(item => {
+      return (<li key={item.key} />);
+    });
+  };
+
+  render() {
+    const childrenToRender = this.getChildren();
+    return (<div className="switch" onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
+      <h2>鼠标经过当前区域，再移出区域查看</h2>
+      <QueueAnim component="ul" leaveReverse delay={[0, 300]} type="scale">
+        {childrenToRender}
+      </QueueAnim>
+      <QueueAnim component="ul" leaveReverse delay={150} type="scale">
+        {childrenToRender}
+      </QueueAnim>
+      <QueueAnim component="ul" leaveReverse delay={[300, 0]} type="scale">
+        {childrenToRender}
+      </QueueAnim>
+    </div>);
+  }
+}
+
+ReactDom.render(<Demo />, document.getElementById('__react-content'));
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-queue-anim",
-  "version": "0.11.12",
+  "version": "0.12.0-beta.0",
   "description": "Queue animation component for react",
   "keywords": [
     "react",
diff --git a/src/QueueAnim.jsx b/src/QueueAnim.jsx
@@ -95,6 +95,8 @@ import {
   mergeChildren,
   transformArguments,
   getChildrenFromProps,
+  assignChild,
+  checkStyleName,
 } from './utils';
 import AnimTypes from './animTypes';
 const BackEase = {
@@ -105,6 +107,9 @@ const BackEase = {
 
 const placeholderKeyPrefix = 'ant-queue-anim-placeholder-';
 
+const noop = () => {
+};
+
 class QueueAnim extends React.Component {
   constructor() {
     super(...arguments);
@@ -150,12 +155,27 @@ class QueueAnim extends React.Component {
       nextChildren
     );
 
+    const childrenShow = this.state.childrenShow;
+    if (nextProps.enterForcedRePlay) {
+      // 在出场没结束时，childrenShow 里的值将不会清除。再触发进场时， childrenShow 里的值是保留着的, 设置了 enterForcedRePlay 将重新播放进场。
+      newChildren.forEach(item => {
+        if (this.keysToLeave.indexOf(item.key) >= 0) {
+          const node = findDOMNode(this.refs[item.key]);
+          // 因为进场是用的间隔性进入，这里不做 stop 处理将会在这间隔里继续出场的动画。。
+          velocity(node, 'stop');
+          delete childrenShow[item.key];
+        }
+      });
+    }
+
+
     this.keysToEnter = [];
     this.keysToLeave = [];
     this.keysAnimating = [];
 
     // need render to avoid update
     this.setState({
+      childrenShow,
       children: newChildren,
     });
 
@@ -237,6 +257,47 @@ class QueueAnim extends React.Component {
     });
   }
 
+  getInitAnimType = (node, velocityConfig) => {
+    /*
+     * enterForcedRePlay 为 false 时:
+     * 强行结束后，获取当前 dom 里是否有 data 里的 key 值，
+     * 如果有，出场开始启动为 dom 里的值
+     * 而不是 animTypes 里的初始值，如果是初始值将会跳动。
+     */
+    const data = { ...assignChild(velocityConfig) };
+    const transformsBase = velocity && velocity.prototype.constructor &&
+      velocity.prototype.constructor.CSS.Lists.transformsBase || [];
+    const setPropertyValue = velocity && velocity.prototype.constructor &&
+      velocity.prototype.constructor.CSS.setPropertyValue || noop;
+    const getUnitType = velocity && velocity.prototype.constructor &&
+      velocity.prototype.constructor.CSS.Values.getUnitType || noop;
+    const nodeStyle = node.style;
+    Object.keys(data).forEach(dataKey => {
+      let cssName = dataKey;
+      if (transformsBase.indexOf(dataKey) >= 0) {
+        cssName = 'transform';
+        const transformString = nodeStyle[checkStyleName(cssName)];
+        if (transformString && transformString !== 'none') {
+          if (transformString.match(dataKey)) {
+            const rep = new RegExp(`^.*${dataKey}\\(([^\\)]+?)\\).*`, 'i');
+            const transformData = transformString.replace(rep, '$1');
+            data[dataKey][1] = parseFloat(transformData);
+            return;
+          }
+        } else {
+          data[dataKey][1] = 0;
+        }
+      } else if (nodeStyle[dataKey] && parseFloat(nodeStyle[dataKey])) {
+        data[dataKey][1] = parseFloat(nodeStyle[dataKey]);
+      } else {
+        data[dataKey][1] = 0;
+      }
+      // 先把初始值设进 style 里。免得跳动；把下面的设置放到这里。
+      setPropertyValue(node, cssName, `${data[dataKey][1]}${getUnitType(dataKey)}`);
+    });
+    return data;
+  };
+
   performEnter(key, i) {
     const interval = transformArguments(this.props.interval, key, i)[0];
     const delay = transformArguments(this.props.delay, key, i)[0];
@@ -261,9 +322,13 @@ class QueueAnim extends React.Component {
       return;
     }
     const duration = transformArguments(this.props.duration, key, i)[0];
-    node.style.visibility = 'hidden';
     velocity(node, 'stop');
-    velocity(node, this.getVelocityEnterConfig(key, i), {
+    const data = this.props.enterForcedRePlay ? this.getVelocityEnterConfig(key, i) :
+      this.getInitAnimType(node, this.getVelocityEnterConfig(key, i));
+    if (this.props.enterForcedRePlay) {
+      node.style.visibility = 'hidden';
+    }
+    velocity(node, data, {
       duration,
       easing: this.getVelocityEasing(key, i)[0],
       visibility: 'visible',
@@ -284,7 +349,8 @@ class QueueAnim extends React.Component {
     const duration = transformArguments(this.props.duration, key, i)[1];
     const order = this.props.leaveReverse ? (this.keysToLeave.length - i - 1) : i;
     velocity(node, 'stop');
-    velocity(node, this.getVelocityLeaveConfig(key, i), {
+    const data = this.getInitAnimType(node, this.getVelocityLeaveConfig(key, i));
+    velocity(node, data, {
       delay: interval * order + delay,
       duration,
       easing: this.getVelocityEasing(key, i)[1],
@@ -369,6 +435,7 @@ class QueueAnim extends React.Component {
       'ease',
       'leaveReverse',
       'animatingClassName',
+      'enterForcedRePlay',
     ].forEach(key => delete tagProps[key]);
     return createElement(this.props.component, { ...tagProps }, childrenToRender);
   }
@@ -391,6 +458,7 @@ QueueAnim.propTypes = {
   animConfig: funcOrObjectOrArray,
   ease: funcOrStringOrArray,
   leaveReverse: React.PropTypes.bool,
+  enterForcedRePlay: React.PropTypes.bool,
   animatingClassName: React.PropTypes.array,
 };
 
@@ -403,6 +471,7 @@ QueueAnim.defaultProps = {
   animConfig: null,
   ease: 'easeOutQuart',
   leaveReverse: false,
+  enterForcedRePlay: false,
   animatingClassName: ['queue-anim-entering', 'queue-anim-leaving'],
 };
 
diff --git a/src/utils.js b/src/utils.js
@@ -83,3 +83,28 @@ export function transformArguments(arg, key, i) {
 export function getChildrenFromProps(props) {
   return props && props.children;
 }
+
+export function assignChild(data) {
+  const obj = {};
+  Object.keys(data).forEach(key => {
+    if (Array.isArray(data[key])) {
+      obj[key] = [].concat(data[key]);
+      return;
+    } else if (typeof data[key] === 'object') {
+      obj[key] = { ...data[key] };
+      return;
+    }
+    obj[key] = data[key];
+    return;
+  });
+  return obj;
+}
+
+export function checkStyleName(p) {
+  const a = ['O', 'Moz', 'ms', 'Ms', 'Webkit'];
+  if (p !== 'filter' && p in document.body.style) {
+    return p;
+  }
+  const _p = p.charAt(0).toUpperCase() + p.substr(1);
+  return `${(a.filter((key) => `${key}${_p}` in document.body.style)[0] || '')}${_p}`;
+}
diff --git a/tests/index.js b/tests/index.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "rc-queue-anim",`
`3`		`- "version": "0.11.12",`
	`3`	`+ "version": "0.12.0-beta.0",`
`4`	`4`	`"description": "Queue animation component for react",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"react",`