React-Pose 动画退出问题答案

【问题标题】：React-Pose Animation Exit issueReact-Pose 动画退出问题
【发布时间】：2019-01-07 17:47:37
【问题描述】：

我正在使用react-pose 为窗口内外的通知设置动画。

“进入”过渡非常流畅，但在退出时 - 动画非常激进。

有人遇到过这个问题吗？我可以在任何地方上传视频屏幕截图来说明问题（除了 youtube）。

这是我的代码：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import posed, { PoseGroup } from "react-pose";

import classNames from 'classnames';
import "./index.scss";

import key from 'keymaster';
import Notification from '../../components/Notification';

const NotificationPose = posed.div({
  enter: { 
    opacity: 1, 
    x: '0%',
    transition: { 
      duration: 300, 
      ease: 'easeIn' 
    } 
  },
  exit: { 
    opacity: 0, 
    x: '100%',
    transition: {
      duration: 500,
      ease: 'easeOut'
    }
  }
});

class NotificationCentre extends Component {

  static propTypes = {
    notifications: PropTypes.array,
  };
  static defaultProps = {
    notifications: []
  };

  constructor(props) {
    super(props);
    this.className=this.keyScope='NotificationCentre';
  }
  render(){
    return (
      <div className={`${this.className}`}>
          <PoseGroup>
          {
            this.props.notifications.map((d, i) => {
              return (
                <NotificationPose key={`notification-anim-${i}`}>
                  <Notification
                    key={`notification-${i}`}
                    active={false}
                    {...d}/>
                </NotificationPose>

              );
            })
          }
          </PoseGroup>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({});
const mapStateToProps = state => ({
  tvShowsList: state.tvShows.fetchingTVShowsListHasSucceeded,
});

export default connect(mapStateToProps, mapDispatchToProps)(NotificationCentre);

【问题讨论】：

我相信我遇到了同样的问题 - 我创建了一个 CodeSandbox 来重现它，退出时延迟以突出问题。这符合您的要求吗？
就是这样 - 我认为库本身可能存在问题。如果您找到解决办法，请告诉我。
我不认为这是库的问题 - 我认为问题在于对于单个项目应该如何动画，而不是容器（ul）或下面的内容有明确的指导.我有一个 hacky 修复，我可能会尽快发布一个可能的答案。
@Toby 你能分享一下修复方法吗？
我在这里找到了答案：stackoverflow.com/a/58952245/8884948

标签： reactjs animation

【解决方案1】：

PosedGroup 要求每个孩子都有唯一的关键属性轨道进入和退出孩子。

如文档中所述 (Here)

必须为每个孩子提供唯一的关键属性，以便 PoseGroup 跟踪进入和退出的孩子。

避免使用数组索引作为键，因为输入的新元素将与删除的元素具有相同的键。而是使用唯一 ID，例如 notification.id，它会正常工作。

【讨论】：