Comments (11)
@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> <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.
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.
Related Issues (20)
- Firefox throws "SecurityError" exception HOT 3
- Animation for new view is completely finished before animation for old view starts HOT 4
- Animations issue in firefox HOT 3
- Long animations can lead to invalid DOM state. HOT 4
- el.addEventListener not a function
- Concurrent Animations not working HOT 5
- Animator interfering with other CSS Transitions HOT 2
- Update before animation if interpolation in element class HOT 11
- Last item does not animate HOT 2
- How to use this plugin, have no doc ? HOT 4
- Typescript definitions HOT 4
- show and animation HOT 20
- Infinite scrolling animation delays accumulate HOT 4
- update aurelia-templating to v1.1.4 HOT 1
- Throw an error that is view.bindingContext is null when use au-stagger with if.bind and push item to empty array HOT 1
- wrong classes applied when re-animating an element whose child elements are also animated
- Add toggleClass() to the animation abstraction
- ngRepeat animation (feature) HOT 1
- Support CSS3 transition
- Animation flickers HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from animator-css.