search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.52k stars 605 forks source link

Animation on slide change does not work within my Angular App #1034

Closed joepagan closed 4 years ago

joepagan commented 4 years ago

I have tried to replicated this with a test case: https://stackblitz.com/edit/angular-flickity-create-destroy but in this case my test case works!

I know it's unlikely you can help without a broken test case, but, I've struggled to find any related issue on the matter and not sure how to proceed, maybe this issue has been highlighted elsewhere and I have not found it.

When viewing a working example's DOM, it shows that the translate3d css params update smoothly: AlienatedUltimateEeve-size_restricted

However, in my example, translate3d never seems to be applied and it just jumps to each slide with translateX:

UntimelyUnfoldedCod-size_restricted

It is as if it has been debounced/throttled somehow.

For some context, this issue is occurring inside an angular app (which I cannot share unfortunately), quite new to angular, though implementing it in a very similar way to the test case.

Slight work around seems to be setting the following, but would rather not have to do this:

.flickity-slider{
    transition: 0.3s ease transform;
}
joepagan commented 4 years ago

Ever seen this @desandro or have any suggestions on things to look for?

desandro commented 4 years ago

Hello! Sorry to hear you're having trouble with Flickity. I have the same suspicion - that there is some behavior within the Angular app that is overwriting Flickity's behavior. Angular modifies the DOM. So does Flickity. So you'll need to add extra logic so that Flickity's animation can occur without Angular immediately setting the position. I leave that up to you!

joepagan commented 4 years ago

Just letting you know I have figured out my issue...

I was calling the resize() function inside an unsuitable condition on the AfterViewChecked lifetime event hook (which fires like 3 times whenever a change is made), makes the behavior make complete sense now!