Cleanup temporary class name not work about animator-css HOT 11 CLOSED

@zewa666 Please take a look into this. Thanks!

from animator-css.

Same here, with this HTML:

<button type="button" disabled.bind="processing" class="btn btn-primary" click.trigger="create()">
  <span show.bind="processing">
    <i class="fa fa-spin fa-spinner"></i>&nbsp;<span>Saving</span><span>…</span>
  </span>
  <span show.bind="!processing">
    Save
  </span>
</button>

If you switch processing to true in one tick and then to false in another. Both spans will have 'aurelia-hide' class or some of the "-add", "-remove" classes.

Demo:
http://plnkr.co/edit/hyV1AIjZBx2B4ZHLFAIA?p=preview

from animator-css.

ok so the issue comes down to this change: aurelia/templating-resources@019a206

reverting this to this.element.classList operations fixes it for me. @Mordred can I ask you to manually change that (jspm_packages/npm/aurelia-templating-resources.../show.js) and verify that this works for you as well? If so we know where to fix the issue.

from animator-css.

@zewa666 Yes, this has fixed the button, but I think this should be fixed at animator level. Problem is that animationstart and animationend can bubble from children even if there is no animation for animated element itself.

from animator-css.

you're right @Mordred. The issue is all about the timeout and not being able to identify which's event (add or remove) was fired.

In your example try increasing the timeout high enough (e.g. 55) and it works again. So I think we need to find a way to tie the anmiationstart/end event not only to an element but also the animation method itself.

from animator-css.

@Mordred can you test the new release please? It should now properly cleanup all classes.

from animator-css.

@zewa666 Yes, it is working now. Classes are OK.

Sometimes the 50ms delay is visible - both spans are hidden. How you get that timeout number?

from animator-css.

@zewa666 I think this is ok as a quick fix. I'm not sure we want a timeout as a long-term solution. Can you look at an alternate way to address this?

from animator-css.

Well if we work with CSS3-Animations we're always bound to the timeout, since we don't know when the animation will trigger. The idea is that you set a specific css-class to an element and the element will trigger a DOM-Event. now that should work quite fast, but I realized sometimes it takes a while. 50 was just a guessing by myself, it should also work with lower values. Thats why it's modifiable.

Also the CSS Animator is really meant for simple animations and no complex timing scenarios. That's what Velocity or GreenSock is best at.

from animator-css.

Latest beta 1.0.1 version solve the issue

from animator-css.

Still have issues like this with latest framework (updated it all today).

http://i.imgur.com/CF44oSy.png

As you can see here, account.isBusy is false but tr-row is still showing.

This is a case where the account loads it's transactions, so when loading it sets busy and when http-call is done it sets isbusy = false again. Sometimes doesnt, work, sometimes it does.

This is a critical issue and really needs to be fixed since you can't trust the show binding anymore since you implemented the animator-thing to the show-binding.

@EisenbergEffect @zewa666

Or can you run aurelia with the old show binding, that worked before. Without animator.

Temporary solution for us was to revert back to the old implementation:

import {Show} from 'aurelia-templating-resources';

export class ShowBindingFix {
  constructor() {
    Show.prototype.valueChanged = function valueChanged(newValue) {
      if (newValue) {
        this.element.classList.remove('aurelia-hide');
      } else {
        this.element.classList.add('aurelia-hide');
      }
    };
  }
}

from animator-css.