fix grid dragPlay

examples/simple.js

@@ -12,7 +12,7 @@ const { Element } = BannerAnim;
 const BgElement = Element.BgElement;
 function Demo() {
   return (
-    <BannerAnim prefixCls="banner-user">
+    <BannerAnim prefixCls="banner-user" type="gridBar">
       <Element key="aaa"
         prefixCls="banner-user-elem"
       >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-banner-anim",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "banner-anim animation component for react",
   "keywords": [
     "react",

src/Element.jsx

@@ -16,7 +16,9 @@ import {
   currentScrollLeft,
   dataToArray,
   toArrayChildren,
+  setAnimCompToTagComp,
 } from './utils';
+import animType from './anim';
 
 function noop() {
 }
@@ -177,11 +179,11 @@ class Element extends Component {
   };
 
   getChildren = () => {
-    return toArrayChildren(this.props.children).map(item => {
+    return toArrayChildren(this.props.children).map((item, i) => {
       if (item && item.type === BgElement) {
         return React.cloneElement(item, { show: this.state.show });
       }
-      return item;
+      return this.useTagComp ? setAnimCompToTagComp(item, i) : item;
     });
   }
 
@@ -204,7 +206,7 @@ class Element extends Component {
   }
 
   animChildren = (props, style, bgElem) => {
-    const { elemOffset, leaveChildHide, ratio, animType, direction, mouseMoveType,
+    const { elemOffset, leaveChildHide, ratio, animType: currentAnimType, direction, mouseMoveType,
       ease, duration, delay, show, sync, component } = this.props;
     if (this.tickerId) {
       ticker.clear(this.tickerId);
@@ -218,11 +220,13 @@ class Element extends Component {
     props.component = component;
     style.zIndex = show ? 1 : 0;
     const type = show ? 'enter' : 'leave';
+    this.useTagComp = (currentAnimType === animType.gridBar || currentAnimType === animType.grid) &&
+      (show === this.state.show || (this.state.show && !show));
     // 状态没改，锁定 children 
     props.children = show && !sync && show !== this.state.show ? bgElem : this.getChildren();
     const childrenToRender = React.createElement(TweenOne, props);
     const $ratio = mouseMoveType === 'end' && ratio <= 0.3 ? 1 - ratio : ratio;
-    const tag = animType(childrenToRender,
+    const tag = currentAnimType(childrenToRender,
       type,
       direction,
       {

src/anim.jsx

@@ -1,5 +1,5 @@
 import React, { cloneElement } from 'react';
-import { toArrayChildren, setAnimCompToTagComp, switchChildren } from './utils';
+import { toArrayChildren, switchChildren } from './utils';
 
 export default {
   across(elem, type, direction, animData, elemOffset, leaveChildHide) {
@@ -91,7 +91,6 @@ export default {
       _y = direction === 'next' ? '-100%' : '100%';
     } else {
       _y = direction === 'next' ? '100%' : '-100%';
-      children = toArrayChildren(children).map(setAnimCompToTagComp);
     }
     const moment = ratio * (animData.duration + animData.delay + gridNum * 50 - (type === 'enter' ? 50 : 0)) || 0;
     for (let i = 0; i < gridNum; i++) {
@@ -106,6 +105,7 @@ export default {
       _style.float = 'left';
       _style.position = 'relative';
       _style.left = `${-i * girdSize / 100 * elemOffset.width}px`;
+      _style.overflow = 'hidden';
       const animProps = { ...props };
       animProps.style = _style;
       const delay = (direction === 'next' ? i : gridNum - i) * 50 + (type === 'enter' ? 0 : 50) + (animData.delay || 0);
@@ -160,22 +160,23 @@ export default {
       style.height = `${gridWidth + 1}px`;
       style.left = i % gridNum * gridWidth;
       style.top = Math.floor(i / gridNum) * gridWidth;
+      style.opacity = 0;
       // clone 的样式
       const _style = { ...props.style };
       _style.width = `${elemOffset.width}px`;
       _style.height = `${elemOffset.height}px`;
       _style.position = 'relative';
       _style.left = -i % gridNum * gridWidth;
       _style.top = -Math.floor(i / gridNum) * gridWidth;
+      _style.overflow = 'hidden';
       props.style = _style;
       let delay = direction === 'next' ? i % gridNum * 50 + Math.floor(i / gridNum) * 50 :
         (gridNum - 1 - i % gridNum) * 50 + (gridNumH - 1 - Math.floor(i / gridNum)) * 50;
       delay += animData.delay || 0;
       const length = direction === 'next' ? gridNum * gridNumH - 1 : 0;
       const animation = {
         ...animData,
-        opacity: 0,
-        type: 'from',
+        opacity: 1,
         delay,
         onComplete: i === length ? animData.onComplete : null,
       };