-
Notifications
You must be signed in to change notification settings - Fork 257
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Leave animation moves up too high #149
Comments
Hey there, Ok, so I poked around on your web app (cool project, by the way!). The problem appears to be with Short versionFlipMove doesn't work great with HTML tables. The recommended approach would be to use I have a workaround that might work and allow you to use tables, though. It involves getting rid of the <FlipMove
typeName='table'
className='table table-hover'
enterAnimation='fade'
leaveAnimation='fade'
>
<tr>
<th>Logo</th>
<th>Channel</th>
<th>Status</th>
</tr>
{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))}
</FlipMove> This loses the benefit of distinct separation between More infoSo, leave animations in FlipMove are kinda tricky. Because the sibling elements need to move into the vacuum created by their exit, FlipMove has to remove them from the DOM flow, so that the siblings can figure out where to go. I do this by setting
Unfortunately it looks like browsers don't respect the The fix I proposed above should work because the I think it would be nice to throw a Going to leave this issue open until I've added such a warning. Let me know if the solution without the |
Hey @joshwcomeau I implemented your fix by removing the tbody and thead tags and it's working a lot better in that it's exiting at the same height level now. But the leave animation is still fading out to the left slightly. |
Hey @drhectapus, So yeah, it looks like this is simply a limit with HTML tables :( When you apply It makes sense, in a way; I think this is one of those situations where you'll need to choose between the flexibility of an HTML table, and animations. If you convert the structure to Leaving this open until I add a note to the docs and a dev warning. |
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/
The text was updated successfully, but these errors were encountered: