joshwcomeau / joshwcomeau/react-flip-move

Leave animation moves up too high

Open
#149 3 comments 1 reaction 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
4.1k
Forks
250
PR merge metrics
No merged PRs in 30d

Description

Loving the plugin so far, but have an issue with the leave animation. It pushes the child component (in this case, a element) up and to the left. How do I get it to fade in it's current position?

App: https://twitch-react-drhectapus.herokuapp.com/

```
import React, { Component } from 'react';
import { connect } from 'react-redux';
import FlipMove from 'react-flip-move';
import { selectUser, fetchUser, removeUser } from '../actions/index';

class UsersList extends Component {
constructor(props) {
super(props);
this.state = {
show: 'all',
};
this.fetchInitialUsers(this.props.initialUsers);
}

fetchInitialUsers(users) {
users.map(this.props.fetchUser);
}

renderUser(user) {
const { channelData, streamData } = user;
return (
this.props.selectUser(user)}
className='list-item'>




{channelData.display_name}


{streamData.stream ?
Online :
Offline}


this.props.removeUser(user)}>

)
}

showOnline() {
this.setState({
show: 'online'
});
}

showOffline() {
this.setState({
show: 'offline'
});
}

showAll() {
this.setState({
show: 'all'
});
}

render() {
return (





All


Online


Offline





{/* */}

{this.props.users.filter(user => {
const { show } = this.state;
const { streamData } = user;
if (show == 'online') {
return streamData.stream;
}
else if (show == 'offline') {
return !streamData.stream;
}
else {
return user;
}
}).map(this.renderUser.bind(this))}

{/* */}



Logo
Channel
Status




)
}
}

function mapStateToProps({ users, initialUsers }) {
return { users, initialUsers };
}

export default connect(mapStateToProps, { selectUser, fetchUser, removeUser })(UsersList);

```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the linked app and inspecting the UsersList component's FlipMove usage around the table and tr elements. Compare the leave animation's behavior when filtering users; done means the row fades out without moving up or left from its current position.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.