Выход из анимации React-Pose

Question

Я использую response-pose для анимации уведомлений в и из окна.

Переход "enter" приятный и плавный, однако при выходе - анимация очень агрессивная.

Кто-нибудь сталкивался с этой проблемой?Везде, где я могу загрузить видео снимок экрана, чтобы проиллюстрировать проблему (кроме 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);

Answer 1

PosedGroup требует, чтобы каждый дочерний элемент имел уникальную ключевую характеристику, отслеживающую вход и выход дочерних элементов.

Как указано в документации ( Здесь )

Каждый дочерний элемент должен бытьпредоставил уникальное свойство ключа для PoseGroup, чтобы отслеживать входящие и выходящие дочерние элементы.

Избегайте использования индекса массива в качестве ключа для этого, так как введенный новый элемент будет иметь тот же ключ, что и удаленный.Вместо этого используйте уникальный идентификатор, такой как notification.id, и он будет работать нормально.