bump 0.12.0-beta.0

Author: jljsj33

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;
+      }
+    }
+  }
+}

examples/switch.html

@@ -0,0 +1 @@
+placeholder

examples/switch.js

@@ -0,0 +1,57 @@
+/* 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}>
+      <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'));

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",

src/QueueAnim.jsx

@@ -149,13 +149,23 @@ class QueueAnim extends React.Component {
       currentChildren,
       nextChildren
     );
-
+    // 在出场没结束时，childrenShow 里的值将不会清除。再触发进场时， childrenShow 里的值是保留着的，所以在这做下清除。
+    const childrenShow = this.state.childrenShow;
+    newChildren.forEach(item => {
+      if (this.keysToLeave.indexOf(item.key) >= 0) {
+        const node = 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,
     });
 
@@ -272,6 +282,15 @@ class QueueAnim extends React.Component {
     });
   }
 
+  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}`;
+  };
+
   performLeave(key, i) {
     clearTimeout(this.placeholderTimeoutIds[key]);
     delete this.placeholderTimeoutIds[key];
@@ -284,7 +303,34 @@ 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), {
+    /*
+     * 强行结束后，获取当前 dom 里是否有 data 里的 key 值，如果有，出场开始启动为 dom 里的值
+     * 而不是 animTypes 里的初始值，如果是 初始值将会跳动。
+     */
+    const data = { ...this.getVelocityLeaveConfig(key, i) };
+    const transformsBase = velocity &&
+      velocity.prototype.constructor.CSS.Lists.transformsBase || [];
+    // const setPropertyValue = velocity.prototype.constructor.CSS.setPropertyValue;
+    // const getUnitType = velocity.prototype.constructor.CSS.Values.getUnitType;
+    const nodeStyle = node.style;
+    Object.keys(data).forEach(dataKey => {
+      if (transformsBase.indexOf(dataKey) >= 0) {
+        const transformString = nodeStyle[this.checkStyleName('transform')];
+        if (transformString && transformString !== 'none') {
+          if (transformString.match(dataKey)) {
+            const rep = new RegExp(`[^${dataKey}\\(\\d+.*\\)]`, 'i');
+            const rep2 = new RegExp(`${dataKey}\\(([\\s\\S]+)\\)`, 'i');
+            const transformData = transformString.replace(rep, '').replace(rep2, '$1');
+            data[dataKey][1] = parseFloat(transformData);
+            return;
+          }
+        }
+      }
+      if (nodeStyle[dataKey] && parseFloat(nodeStyle[dataKey])) {
+        data[dataKey][1] = parseFloat(nodeStyle[dataKey]);
+      }
+    });
+    velocity(node, data, {
       delay: interval * order + delay,
       duration,
       easing: this.getVelocityEasing(key, i)[1],