Question

我有一点全球性的＆＃34;吐司＆＃34;反应我正在建设的组件。它从redux状态提供给我的toast列表。我试图让他们用反应ReactCSSTransitionGroup进行动画制作，我似乎能够获得输入/活动动画，但不是离开。

这是我的组件：

   export default class FollainToast extends React.Component {
  constructor(props) {
    super(props);

    this.mapToasts = this.mapToasts.bind(this);
  }

  mapToasts() {
    return this.props.display.toasts.map((toast) => {
      return (
        <div className="my-toast" key={toast.id}>
          <p className="toast-msg">{toast.msg}</p>
        </div>
      );
    });
  }

  render() {
    if (this.props.display && this.props.display.toasts && this.props.display.toasts.length > 0) {
      return (
        <div className="row">
          <ReactCSSTransitionGroup
            transitionName="toasty"
            transitionAppear
            transitionAppearTimeout={400}
            transitionEnter
            transitionEnterTimeout={400}
            transitionLeave
            transitionLeaveTimeout={400}
            >
          {this.mapToasts()}
          </ReactCSSTransitionGroup>
        </div>
      );
    }
    return null;
  }
}

因此，它需要一个名为display的prop，其中包含toasts列表并呈现它们。我认为这可能与我在某些逻辑中包含render()函数的事实有关，以确保吐司但是objet是在那里（或者不要渲染）但是我是老实说不确定。

这是我用于动画的CSS

.toasty-appear, .toasty-enter {
  opacity: 0.01;
  transform:   translate(-250px,0);
  transform: translate3d(0,-100%,0);
}

.toasty-appear.toasty-appear-active, .toasty-enter..toasty-enter-active {
  opacity: 1;
  transition: opacity 1s ease;
  transform:   translate(0,0);
  transform: translate3d(0,0,0);
  transition-property: transform, opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
}

.toasty-leave {
  opacity: 1;
  transform:   translate(0,0,0);
  transform: translate3d(0,0,0);
  transition-property: transform, opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
}
.toasty-leave.toasty-leave-active {
  opacity: 0.01;
  transform:   translate(-250px,0);
  transform: translate3d(0,-100%,0);
}

输入动画效果很好，但是当吐司从toast列表中删除时，它会立即从dom中消失。谢谢你的阅读！

React，ReactCSSTransitionGroup看起来有效，但不会离开

0 个答案: