4

I'm using react-pose to animate notifications in and out of the window.

The "enter" transition is nice and smooth however, on exit - the animation is very aggressive.

Has anyone encountered this issue? Anywhere I can upload a video screen capture to illustrate the issue ( besides youtube ).

Here is my code: 

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);
Filth
  • 3,116
  • 14
  • 51
  • 79
  • I believe I'm experiencing the same issue - I've created a [CodeSandbox](https://codesandbox.io/s/l21571v3w9) to reproduce it, with a delay on exit to highlight the issue. Does this fit with what you are asking? – Toby Oct 18 '18 at 17:08
  • This is exactly it - I think there may be an issue with the library itself. If you come upon a fix please let me know. – Filth Oct 25 '18 at 10:45
  • 1
    I don't believe it's an issue with the library - I believe the issue is that there is clear guidance on how the single item should animate, but not the container (the ul) or the content below. I have a hacky fix I might post as a possible answer shortly. – Toby Oct 25 '18 at 17:40
  • 1
    @Toby Can you share the fix? – Ante Gulin Feb 17 '19 at 20:07
  • I found the answer here: https://stackoverflow.com/a/58952245/8884948 – Trí Phan Apr 27 '20 at 09:27

1 Answers1

0

PosedGroup requires every child to have unique key property track entering and exiting children.

As given in documentation (Here)

Every child must be provided a unique key property for PoseGroup to track entering and exiting children.

Avoid using array index as key for this as new element entered will have same key as the removed one. Instead use unique id such as notification.id and it will work fine.

Ekluv
  • 23
  • 5