diff --git a/assets/transition.less b/assets/transition.less new file mode 100644 index 0000000..65d4705 --- /dev/null +++ b/assets/transition.less @@ -0,0 +1,3 @@ +div{ + transition: all .5s; +} \ No newline at end of file diff --git a/examples/transition.html b/examples/transition.html new file mode 100644 index 0000000..b3a4252 --- /dev/null +++ b/examples/transition.html @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/examples/transition.js b/examples/transition.js new file mode 100644 index 0000000..9720827 --- /dev/null +++ b/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( +
依次进入
+
依次进入
+
依次进入
+
依次进入
+
依次进入
+
, document.getElementById('__react-content')); diff --git a/package.json b/package.json index e1cb4db..883001b 100644 --- a/package.json +++ b/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", diff --git a/src/QueueAnim.jsx b/src/QueueAnim.jsx index e0c69e1..603991e 100644 --- a/src/QueueAnim.jsx +++ b/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, ''); }); } diff --git a/src/utils.js b/src/utils.js index 53c6b67..51479c1 100644 --- a/src/utils.js +++ b/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; +} +