1

我正在构建一个小的全局“吐司”反应组件。它提供了我从 redux 状态提供给它的 toast 列表。我试图让他们用 react's 动画进出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 的道具，其中包含一个列表toasts并呈现它们。我认为这可能与我将render()函数包装在一些逻辑中以确保敬酒但对象的存在（或不渲染）这一事实有关，但我不确定。

这是我用于动画的 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);
}

enter 动画效果很好，但是当 toast 从 toasts 列表中删除时，它会立即从 dom 中消失。谢谢阅读！

4

0 回答 0