add transition

assets/transition.less

@@ -0,0 +1,3 @@
+div{
+  transition: all .5s;
+}

examples/transition.html

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

examples/transition.js

@@ -0,0 +1,12 @@
+import QueueAnim from 'rc-queue-anim';
+import React from 'react';
+import ReactDom from 'react-dom';
+import '/assets/transition.less';
+
+ReactDom.render(<QueueAnim duration={1000}>
+  <div key="1">依次进入</div>
+  <div key="2">依次进入</div>
+  <div key="3">依次进入</div>
+  <div key="4">依次进入</div>
+  <div key="5">依次进入</div>
+</QueueAnim>, document.getElementById('__react-content'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-queue-anim",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Queue animation component for react",
   "keywords": [
     "react",

src/QueueAnim.jsx

@@ -7,6 +7,7 @@ import {
   mergeChildren,
   transformArguments,
   getChildrenFromProps,
+  setTransition,
   } from './utils';
 import AnimTypes from './animTypes';
 
@@ -156,7 +157,7 @@ class QueueAnim extends React.Component {
     const delay = transformArguments(this.props.delay, key, i)[0];
     placeholderNode.style.visibility = 'hidden';
     velocity(placeholderNode, 'stop');
-    velocity(placeholderNode, { opacity: [0, 0] }, {
+    velocity(placeholderNode, {opacity: [0, 0]}, {
       delay: interval * i + delay,
       duration: 0,
       begin: this.performEnterBegin.bind(this, key, i),
@@ -169,7 +170,7 @@ class QueueAnim extends React.Component {
   performEnterBegin(key, i) {
     const childrenShow = this.state.childrenShow;
     childrenShow[key] = true;
-    this.setState({ childrenShow }, this.realPerformEnter.bind(this, key, i));
+    this.setState({childrenShow}, this.realPerformEnter.bind(this, key, i));
   }
 
   realPerformEnter(key, i) {
@@ -211,6 +212,7 @@ class QueueAnim extends React.Component {
   enterBegin(key, elements) {
     elements.forEach((elem) => {
       elem.className += (' ' + this.props.animatingClassName[0]);
+      setTransition(elem, 'none');
     });
   }
 
@@ -220,12 +222,14 @@ class QueueAnim extends React.Component {
     }
     elements.forEach((elem) => {
       elem.className = elem.className.replace(this.props.animatingClassName[0], '').trim();
+      setTransition(elem, '');
     });
   }
 
   leaveBegin(elements) {
     elements.forEach((elem) => {
       elem.className += (' ' + this.props.animatingClassName[1]);
+      setTransition(elem, 'none');
     });
   }
 
@@ -248,6 +252,7 @@ class QueueAnim extends React.Component {
     }
     elements.forEach((elem) => {
       elem.className = elem.className.replace(this.props.animatingClassName[1], '').trim();
+      setTransition(elem, '');
     });
   }
 

src/utils.js

@@ -83,3 +83,12 @@ export function transformArguments(arg, key, i) {
 export function getChildrenFromProps(props) {
   return props && props.children;
 }
+
+export function setTransition(node, value) {
+  const style = node.style;
+  ['Webkit', 'Moz', 'Ms', 'ms'].forEach((prefix)=> {
+    style[`${prefix}Transition`] = value;
+  });
+  style[`Transition`] = value;
+}
+