Skip to content
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

Animation bug when remove element #69

Open
DonSalvador opened this issue Aug 13, 2022 · 4 comments · May be fixed by #211
Open

Animation bug when remove element #69

DonSalvador opened this issue Aug 13, 2022 · 4 comments · May be fixed by #211

Comments

@DonSalvador
Copy link

When the wrapper is positioned at the bottom, a bug is shown in the animation when removing an item.
Reproduction with Vue

@vixducis
Copy link

I encountered the same issue in a react project, implementing a snackbar-like component.

@galaxyblur
Copy link

This seems to occur less often with a higher duration, which points to maybe a race condition in calculating the element's offset vs starting its animation.

@syropian
Copy link

Same issue for me in a React project. I have two containers in a flex context (with flex-direction: column) and the second container is pushed to the bottom using margin-top: auto, which contains an animated <ul> list that is suffering the same jankiness when deleting items as OP

@drmercer
Copy link

drmercer commented Sep 18, 2023

Not sure if this is exactly the same issue, but vertical centering also causes a glitch on exit. If you apply these styles to the demo at https://auto-animate.formkit.com/ , then elements pop upwards when you remove them from the list:

#demo > div > [data-has-animation=true] {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

94726 added a commit to 94726/auto-animate that referenced this issue Aug 8, 2024
@94726 94726 linked a pull request Aug 8, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants