Reactjs 反应姿势动画退出问题

我用它来制作窗口内外通知的动画

“进入”的过渡是美好的和顺利的，然而，在退出-动画是非常积极的

有人遇到过这个问题吗？我可以在任何地方上传视频截图来说明这个问题（除了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);

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从'react redux'导入{connect}；
从“反应姿势”导入姿势，{PoseGroup}；
从“类名称”导入类名称；
导入“/index.scss”；
从“keymaster”导入密钥；
从“../../components/Notification”导入通知；
const NotificationPose=posed.div({
输入：{
不透明度：1，
x:'0%'，
过渡：{
持续时间：300，
放松：“放松”
} 
},
退出：{
不透明度：0，
x:‘100%’，
过渡：{
持续时间：500，
放松：“放松”
}
}
});
类通知中心扩展组件{
静态类型={
通知：PropTypes.array，
};
静态defaultProps={
通知：[]
};
建造师（道具）{
超级（道具）；
this.className=this.keyScope='notificationcenter'；
}
render（）{
返回(
{
this.props.notifications.map（（d，i）=>{
返回(
);
})
}
);
}
}
常量mapDispatchToProps=dispatch=>（{}）；
常量mapStateToProps=状态=>({
电视节目列表：state.tvShows.fetchingvshowslist已成功，
});
导出默认连接（mapStateToProps、mapDispatchToProps）（通知中心）；

PosedGroup要求每个子项都具有唯一的键属性轨迹，以进入和退出子项

如文件（）

必须为每个子级提供唯一的密钥属性，以便PoseGroup跟踪进入和退出的子级

---

避免使用数组索引作为该元素的键，因为输入的新元素将与删除的元素具有相同的键。相反，请使用唯一的id，例如

通知.id

，它会很好地工作。

我相信我遇到了相同的问题-我创建了一个复制它的方法，并在退出时延迟以突出显示问题。这符合你的要求吗？这正是它-我认为图书馆本身可能有问题。如果您遇到问题，请让我知道。我不认为这是图书馆的问题-我相信问题在于，有关于单个项目如何动画的明确指导，但没有容器（ul）或下面的内容。我有一个黑客补丁，我可能很快会发布作为可能的答案。@Toby你能分享这个补丁吗？我在这里找到了答案：