Update before animation if interpolation in element class about animator-css HOT 11 OPEN

stale since 2016

from animator-css.

without a full example it's hard to replicate the issue, but I guess it might be because you've placed the class au-stagger onto the template tag. Please try to wrap the animated divs with another div and place the au-stagger over there, like

<template>
  <div class="au-stagger">
    <div repeat.for="item of feedbackService.items" class="au-animate feedback-item level-${item.level}">
        <a click.trigger="feedbackService.removeItem(item)" href="#" class="fa fa-times-circle"></a>
        <p>${item.message}</p>
    </div>
  </div>
</template>

from animator-css.

After a lot of trial-and-error I've found that the problem only occurs when there's interpolation in the animated element's class list.

I've created an Plunkr demonstrating the issue. The top three items have class interpolation, the bottom three don't. See what happens when you try to remove item number 2.

from animator-css.

hmm I've looked at your example few times and don't really have a clue what the error or bug is you're trying to point out.

from animator-css.

That's strange... I'm seeing this bug in both Chrome and Firefox. Here's a screencast of what I'm seeing:

When I click to remove item 2, it briefly becomes blue before folding. Same thing when I remove item 1. This happens with the top three items which have an interpolated className, but not the bottom three that use inline styling.

You're not getting this?

from animator-css.

oh ok now I understand what you mean. Yep I can see the same effect. Hmmm honestly I have no clue whats causing this, guess maybe something related to how the ViewSlots are added and removed. @martingust and @EisenbergEffect do you maybe have an idea whats causing the issue with the class interpolation?

from animator-css.

Any progress on this?

from animator-css.

@RomkeVdMeulen I have analyzed this issue (today) and I think I know where the problem lies. I'll get back to you on this.

from animator-css.

@niieani Did you have any feedback on this?

from animator-css.

Haven't had the time to work on this yet, just did some preliminary assessment. It's on my list though.

from animator-css.

I ran into this issue again today so I thought I'd poke this old issue in the hopes it won't be completely forgotten.

from animator-css.