joshwcomeau / joshwcomeau/react-flip-move
Leave animation moves up too high
- 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