2

背景我正在尝试为一组元素创建一个容器，每个元素都可以从集合中删除。当一个元素被移除时，我想为它的退出设置动画，我正在尝试使用 React Motion 来实现这一点。

这是上面的示意图：

在此处输入图像描述

问题我想使用 React Motion 的TransitionMotion组件，但在尝试编写需要传递给它的函数时遇到了困难。这是我的——不正确的——代码：

class Container extends Component {

  state = {
    elementStyles: {}
  }

  componentDidMount() {
    this.getElementStyles();
  }

  componentDidUpdate() {
    this.getElementStyles();
  }

  getElementStyles() {
    if (!this.props.children.length || this.hasElementStyles()) return;

    // this assumes all elements passed to the container are of equal dimensions
    let firstChild = this.refs.scroller.firstChild;

    let elementStyles = {
      width: firstChild.offsetWidth,
      height: firstChild.offsetHeight,
      opacity: 1
    };

    this.setState({
      elementStyles
    });
  }


  hasElementStyles() {
    return !isEmpty(this.state.elementStyles); // lodash to the rescue
  }

  willLeave() {
    return { width: spring(0), height: spring(0), opacity: spring(0) }
  }

  getChildrenArray() {
    return Children.toArray(this.props.children); // that's React's util function
  }

  getModifiedChild(element, props) {
    if (!element) return;

    return React.cloneElement(
      element,
      {style: props.style}
    );
  }

  getInitialTransitionStyles() {
    let elements = this.getChildrenArray();
    let result = elements.map((element, index) => ({
      key: element.key,
      style: this.state.elementStyles
    }));
    return result;
  }

  render() {
    if (this.hasElementStyles()) {

      return (
        <TransitionMotion
          willLeave={this.willLeave}
          styles={this.getInitialTransitionStyles()}
        >
            { interpolatedStyles => {
              let children = this.getChildrenArray();
              return <div ref="scroller" className="container">
                { interpolatedStyles.map((style, index) => {
                    return this.getModifiedChild(children[index], style);
                  })
                }
              </div>
            }}
        </TransitionMotion>
      );
    } else {
      return (
        <div ref="scroller" className="container">
          { this.props.children }
        </div>
      );
    }
  }

}

请注意 TransitionMotion 组件中 map 函数内的这一行：return this.getModifiedChild(children[index], style)。这是错误的，因为一旦从集合中删除一个元素，它this.props.children就会改变，并且children数组的索引将不再对应于styles从这些子元素计算的数组的索引。

所以我需要一些聪明的方法来跟踪props.children从集合中删除元素之前和之后（我想不出一个；我能想到的最好的方法是find在数组上使用一个函数return this.getModifiedChild(children.find(child => child.key === style.key), style);，但是这将导致循环中出现如此多的循环，我什至不敢去想它），或者使用一些我不知道的完全不同的方法。能否请你帮忙？

4

1 回答 1

1

此解决方案的删除动画将已删除的项目（以及行中的其余“卡片”）水平向左滑动到左侧卡片下方（使用它的较低 z-index）。

初始渲染设置 <Motion/> 标签，卡片显示为一行。

每张卡片共享一个删除按钮方法，该方法设置数组元素的索引并启动一个对数组进行切片的计时器。setState 触发渲染，在计时器执行切片之前为卡片设置动画。

class CardRow extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            cardToRemove: 99,
        };
    }

    findCard = (_id) => {
        return this.myArray.find((_card) => {
            return _card.id === _id;
        });
    };

    removeCardClick = (evt) => {
        const _card = this.findCard(evt.target.id);

        setTimeout(() => {  // wait for the render...
            this.myArray.splice(this.myArray.indexOf(_card), 1);
            this.setState({cardToRemove: 99});
        }, 200);

        this.setState({cardToRemove: this.myArray.indexOf(_card)});
    };

    render() {
        let items = this.myArray.map((item, index) => {

            let itemLeft = 200 * index;     // card width 200px
            if (this.state.cardToRemove <= index) {
                itemLeft = 200 * (index - 1);
            }

            // .cardContainer {position: fixed}
            return <div key={item.id}>
                <Motion style={{left: spring(itemLeft)}}>
                    {({left}) =>
                        <div className="cardContainer" style={{left: left}}>
                            <div className="card">
                                <button className="Button" id={item.id} onClick={this.removeCardClick}>Del</button>
                            </div>
                        </div>
                    }
                </Motion>
            </div>;
        });

        items = items.reverse();

        return <div>
            {items}
        </div>;
    }
}

就是这样！感谢和享受，

于 2017-05-01T05:58:20.660 回答