Update before animation if interpolation in element class

[RomkeVdMeulen]

I'm following this guide and expected to see something like:

Instead I got:

Not sure what I'm doing wrong: my code is essentially the same as in the guide.

<template 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>
</template>

export class FeedbackService {

    private static REMOVE_DELAY_MS = 5000;

    public items: FeedbackItem[] = [];

    addItem(item: FeedbackItem) {
        this.items.push(item);
        if (item.autohide) {
            setTimeout(
                () => this.removeItem(item),
                FeedbackService.REMOVE_DELAY_MS * this.items.filter((item) => item.autohide).length
            );
        }
    }

    removeItem(item: FeedbackItem) {
        let index = this.items.indexOf(item);
        if (index > -1) {
            this.items.splice(index, 1);
        }
    }
}

.feedback-item {
    &.au-enter {
        max-height: 0;
    }
    &.au-enter-active {
        animation: feedbackUp 1s;
    }
    &.au-leave-active {
        animation: feedbackDown 1s;
    }
}

@keyframes feedbackUp {
    0%   { max-height: 0; }
    100% { max-height: 102px; }
}

@keyframes feedbackDown {
    0%   { max-height: 102px; }
    100% { max-height: 0; }
}

[zewa666]

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>

[RomkeVdMeulen]

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.

[zewa666]

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.

[RomkeVdMeulen]

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?

[zewa666]

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?

[RomkeVdMeulen]

Any progress on this?

[niieani]

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

[EisenbergEffect]

@niieani Did you have any feedback on this?

[niieani]

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

[Alexander-Taran]

stale since 2016

[RomkeVdMeulen]

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.