Please add the plugin part so we can see how to override the original template/animator.js and start adding Animations to the Skeleton App

Because the plugin tries to remove the au-{event} and au-{event}-active classes after 50ms if the animation has not started, I am running into an issue where the classes are removed before the animationstart event ever fires.

I changed the timeout value from 50ms to 100ms and the issue was fixed in Chrome.

Also, this might present an issue if the animationstart event is only fired after the animation-delay period has finished (per https://developer.mozilla.org/en-US/docs/Web/Events/animationstart). This means that all animations must have a delay of less than whatever the defined timeout period is.

I don't see FOUC on the default skeleton-nav app, which only uses au-enter animations. However, if I add au-leave animations as well, then I get a FOUC in between page transitions. Unfortunately, I am not sure if the flash is the unstyled page leaving or the unstyled page entering.

if we have array of items and have put the au-animate, it make it too slow if we load items via services

I'm submitting a bug report

• Library Version:
  aurelia-animator-css 1.0.4
  aurelia-bootstrapper 2.3.2
  aurelia-cli 1.2.3

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  10.15.0

• NPM Version:
  6.4.1

• Webpack Version
  webpack 4.41.5

• Browser:
  Chrome 79.0.3945.117
  Firefox 72.0.1

• Language:
  all

Current behavior:
There is a gap between css class list modification and DOM modifications. When implementing fade-out animation just like in https://aurelia.io/docs/plugins/animation/, element fades out, but just before removal it becomes fully visible for a moment.

From Chrome's profiler:

At the end of the animation corresponding classes are removed:

And the cleanup promise resolved:

This in turn posts async message:

And there node actually get removed via View.removeNodes().

The problem is between animation classes removal and actual node removal, the DOM manages to recalculate and frame manages to render.

Workaround:
The only option for now is to enable animation done classes (that is totally undocumented):

aurelia.use.plugin("aurelia-animator-css", c => c.useAnimationDoneClasses = true);

And add corresponding styles (also, contrary to examples, I guess it is good to preserve element's css property initial value, that can be defined by other styles - omitted from state is dynamically generated by the browser):

@keyframes FadeOut {
  to {
    opacity: 0;
  }
}

.animate-fade-out {
  &.au-left {
    opacity: 0;
  }

  &.au-leave-active {
    animation: 1500ms ease FadeOut;
  }
}

I'm submitting a feature request

• Library Version:
  1.0.4

Please tell us about your environment:

• Operating System:
  Windows [7|10]

• Node Version:
  10.1.0

• NPM Version:
  6.4.0

• JSPM OR Webpack AND Version
  webpack 4.0

• Browser:
  all

• Language:
  TypeScript 3.0

Current behavior:

animator-css can not work with css3 transitions. you can find the detail here

Expected/desired behavior:

• What is the expected behavior?
  It would be great if we have transitions as option beside animations.

• What is the motivation / use case for changing the behavior?

@zewa666
I think it is so tricky I am not sure works for every scenario but as you asked me you can find the following sample.

Detecting transition start
Website
Implementation

Hi,

ive uploaded a simple example to plunkr:
http://plnkr.co/edit/zGKBeN?p=preview

Basically, when there are multiple divs next to each other with animations applied via au-animate, only the top div is animated. This applied to the latest framework version: "1.0.0-beta.1.2.2".

Could you please have a look.

thanks

Aboobaker Mahomed

Is there any possible way to animate the elements that we are adding on a ngRepeat?

I found 2 ways:
A) Adding the classes directly on the tag with the ngRepeat. This is the easiest one but not really functional because we will animate it every time we come back to this view and we have no control over this
B) Adding hidden on the ngRepeat and every time we add one element we add a .show() but doesn't work properly. Maybe because sometimes the animation goes faster than the html and the content doesn't exist yet.

I was thinking on a tag property because this should be managed from the html if I'm not wrong.

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; }
}

I'm submitting a feature request

• Library Version:
  1.0.1

Please tell us about your environment:

• Operating System:
  OSX 10.x

• Node Version:
  7.3.0

• NPM Version:
  3.10.10

• JSPM OR Webpack AND Version
  JSPM 0.16.53

• Browser:
  all

• Language:
  ESNext

Current behavior:
Presently, the animation abstraction offers up addClass() and removeClass(). This leads to code like this:

if (reveal) {
   this.animator.addClass(...);
else {
   this.animator.removeClass(...);
}

Not the end of the world, but a little verbose.

Expected/desired behavior:
I would suggest a toggleClass() method on the abstraction. It is certainly in keeping with many of the animation libraries out there, including jQuery's, and it would allow the above to be reduced to:

this.animator.toggleClass(...);

• What is the motivation / use case for changing the behavior?
  Terseness, clarity, and harmony with many animation libraries' conventional approach.

For release '[email protected]', the aurelia-animator-css.d.ts file includes the following on line 28:
runSequence(animations: Array<CssAnimation>): Promise<boolean>;
which results in a TS error:
aurelia-animator-css.d.ts(28,35): error TS2304: Cannot find name 'CssAnimation'.

I'm submitting a bug report

• Library Version:
  1.0.0
• Operating System:
  OSX 10.x
• Node Version:
  6.2.0
• NPM Version:
  3.8.9
• JSPM OR Webpack AND Version
  CLI 1.0.0
• Browser:
  Chrome 52
• Language:
  ESNext

Current behavior:
I have an element with show.bind and au-animate class. When I toggle element, it doesn't animate correctly.

Here is my template:

<div
  show.bind="opened"
  class="dropdown-menu au-animate"
</div>

I have first tried with a transition:

.dropdown-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;

  opacity: 1;
  transition: opacity 2s ease-in;

  &.aurelia-hide-add,
  &.aurelia-hide-remove {
    opacity: 0;
  }
}

It didn't works. I can see the aurelia-hide-remove apparition when breaking on attribute changes, but it's removed immediately and there is no transition.

Then, I tried with keyframes:

.dropdown-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  opacity: 1;

  &.aurelia-hide-add {
    animation: fadeOut .2s;
  }
  &.aurelia-hide-remove {
    animation: fadeIn .2s;
  }
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

It doesn't really worked. The aurelia-hide class come back at the end of the animation and then, aurelia-hide-add stays forever like you can see on the following screencast: https://www.dropbox.com/s/w4rwkgyabbcdb6r/aurelia-animation-bug.mov?dl=0

And a demo from a virgin project created with au-cli and latest aurelia-animator-css : https://gist.run/?id=5e8f73adb49480852b8100511429b41f

I'm submitting a bug report

• Library Version:
  1.0.1

Please tell us about your environment:

• Operating System:
  Linux (fedora 23)

• Node Version:
  7.4.0

• NPM Version:
  4.0.5

• JSPM OR Webpack AND Version
  webpack 1.14.0

• Browser:
  Firefox 50.1.0

• Language:
  typescript 2.1.5

Current behavior:

Throw an error that is view.bindingContext is null when use au-stagger with if.bind and push item to empty array. The sample is below.

test.html

<template>
  <ul class="au-stagger some-animation-class" if.bind="items.length > 0">
    <li class="au-animate" repeat.for="item of items">${item}</li>
  </ul>
</template>

test.ts

export default class {
  private items = ['a', 'b', 'c'];

  attached() {
    setInterval(_ => {
      if (this.items.length > 0) {
        // 1. every secs splice an item to array (this code is not important, just for create empty array)
        this.items.splice(this.items.length - 1, 1);
      } else {
       // 2. if the array is empty, push to new item. and then, an error occur "view.bindingContext is null"
        this.items.push('pushed!!');
      }
    }, 3000);
  }
}

I'm submitting a bug report

• Library Version:
  1.0.1

Please tell us about your environment:

• Operating System:
  Windows 7

• Node Version:
  6.9.4

• NPM Version:
  4.1.2

• Browser:
  all

Current behavior:
I am animating a custom element, that is using if.bind to add/remove from dom, with the au-animate and the au-enter-active, au-leave-active and au-left.
Plugin is configured with useAnimationDoneClasses = true.
The problem is that if i try to control child elements with theses classes (that are applied to the custom element), from the second time they are being wrongly applied. The au-left is re-added when the element finishes the show animation (so it disappears again).

For example

my-element.au-left{background-color:rgba(0,0,0,0)}
my-element.au-enter-active{animation:fade-in 400ms linear forwards;}
my-element.au-leave-active{animation:fade-in 400ms linear reverse;}

my-element.au-left article{transform:translateX(100%);}
my-element.au-enter-active article{animation:slide-in 399ms linear forwards;}
my-element.au-leave-active article{animation:slide-in 399ms linear reverse;}

Demo at https://plnkr.co/edit/pRGN9lyY34J4wdUlWopb?p=preview

As you can see the article is also animated based on the classes applied to the my-element. If you try to show the article (in the demo) a second time, once the show animation completes the my-element has both au-entered and au-left classes, and thus renders wrongly.

Expected behavior:
The element should never be with both au-entered and au-left classes applied at the same time.

I am not quite sure if it's intended like this as default behaviour. But right now what happens is, that on navigation the new view animation finishes completely before it starts with the animation of the old view. But what if I'd like to have my old view disappeared before the new one starts to "slide" in?

In my current scenario I want to have my current view animated with fadeOutLeft and my new view animated with fadeInRight. What happens is, that new view is faded in from right beneath my current view, then my current view is faded out to the left. Once it's gone the new view jumps to the top.

Could you please publish this component to bower? It doesn't seem to be available there as of yet

Hi,

I'm trying to make aurelia-css-animate to work but I have some problems. I've followed @EisenbergEffect post and I finally have something which seems to work :

But not for the last item. Last item does not animate at all.

Then, if I add the au-stagger class to my ul, when removing the last li (which does not animated) I have the following error :

`aurelia-templating.js:1372 Uncaught (in promise) TypeError: Cannot read property 'returnToCache' of undefined``

An opt-in feature could be to trigger events on certain situations during animations. The first pass should just retrigger the original catched ones.

Lets see if we find more use cases around this.

In firefox if I set an animation for opacity up from 0 to 1 over n seconds, I see opacity 0 for n / 2 seconds then opacity of 1 for n / 2 seconds.

I haven't tested this with fields other than opacity yet.

I think this issue might be due to repeat.for, I'm not sure but I think it changes the z-index after the element is inserted, and I'm pretty sure firefox has issues with animations coupled with z-index changes. Not sure about that though.

http://plnkr.co/edit/LwzMIIeAOtI5V08CMTL3?p=preview

Click the Toggle Condition two times in quick succession (under 2 second), wait a couple second, then notice how both items go away, yet the if.bind on both clearly indicates that one should always be visible.

Including source code below in case the plunkr doesn't work at some point. Leaving out JSPM boilerplate.

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-animator-css');

  aurelia.start().then(a => a.setRoot());
}

app.js

export class AnimationDemo{  
    conditition = true;
}

app.html

<template>  
    <button click.delegate="condition = !condition">Toggle Condition</button>
    <div class="au-animate foo" if.bind="condition">foo</div>
    <div class="au-animate foo" if.bind="!condition">bar</div>
</template>  

styles.css

.foo.au-enter {
    opacity: 0!important;
}

.foo.au-enter-active {
    -webkit-animation: fadeIn 2s;
    animation: fadeIn 2s;
}

.foo.au-leave-active {
    -webkit-animation: fadeOut 2s;
    animation: fadeOut 2s;
}

/* CSS3-Animations */
@-webkit-keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes fadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

You're aware of the issue, I first reported in the gitter and logged here: aurelia/skeleton-navigation#98

Thank you for your hard work.

Consider updating the .d.ts file and change all HTMLElement classes to Element. Had to do this manually for aurelia-css-animator to work with Typescript.

We just moved to beta version and I think there is a bug in animator.js in method _animationChangeWithValidKeyframe when using external css.
In line 156 is an itterator through cssRules of a styleSheet. However styleSheet from external css have null in cssRule property so an error is thrown on code 'cssRules.length'.
Or I am missing something?

The animation effect on Skeleton.013 works on Chrome but has no effect in IE11.

update the dep aurelia-templating to v1.1.4

see: aurelia/app-ux-showcase#10

With a simple <div class="fa fa-spinner fa-spin" show.bind="isWaiting"></div> on the first load with isWaiting=false, the class remains aurelia-hide-add in place of aurelia-hide
I've this issue on IE11

Here, https://github.com/aurelia/animator-css/blob/master/src/animator.js#L542 the test < 0 seems to be bogus, with a >=0 test it works.

There are the same potential issue in these lines :
https://github.com/aurelia/animator-css/blob/master/src/animator.js#L264
https://github.com/aurelia/animator-css/blob/master/src/animator.js#L370
https://github.com/aurelia/animator-css/blob/master/src/animator.js#L458

Additional infos :
Same issue on chrome 46.
With a setTimeout(() => this.isWaiting = false, 100) it works

Additional infos (2) : read this first :)
the fa-spin animation from font awesome is an infinite duration animation, with a finite animation duration it works, this is the issue. My initial analysis was wrong !

I'm submitting a bug report

• Library Version:
  1.0.1

Please tell us about your environment:

• Operating System:
  Linux (Debian Jessie)

• Node Version:
  4.5.0

• NPM Version:
  3.10.6

• Build Tooling:
  Using Aurelia CLI version 0.18.0

• Browser:
  Chrome 53

• Language:
  ESNext

Steps:

• Have a list with au-stagger with a 0.2s transition delay
• Add 1000 animated items
• Wait for animations to complete
• Add 1000 more animated items
• What is the expected behavior?
• First new animated item immediately begins animation
• What is the actual behavior?
• First new animated item waits for 1000 * 0.2s before it begins animation
• What is the motivation / use case for changing the behavior?
• Infinite scrolling - otherwise there are longer and longer unnecessary delays as you scroll

I have this piece of code

<workflow-report show.bind="model.options[0].enabled" config.bind="model"></workflow-report>

When this gets displayed I get the exception

ERROR [app-router] TypeError: Cannot read property 'add' of undefined
    at Animator.addClass (http://localhost:54804/app/jspm_packages/npm/[email protected]/aurelia-templating.js:83:24)
    at Show.valueChanged (http://localhost:54804/app/jspm_packages/npm/[email protected]/show.js:21:23)
    at Show.bind (http://localhost:54804/app/jspm_packages/npm/[email protected]/show.js:26:12)
    at Controller.bind (http://localhost:54804/app/jspm_packages/npm/[email protected]/aurelia-templating.js:2749:24)
    at View.bind (http://localhost:54804/app/jspm_packages/npm/[email protected]/aurelia-templating.js:843:24)
    at Controller.bind (http://localhost:54804/app/jspm_packages/npm/[email protected]/aurelia-templating.js:2747:19)
    at View.bind (http://localhost:54804/app/jspm_packages/npm/[email protected]/aurelia-templating.js:843:24)
    at ArrayCollectionStrategy.processItems (http://localhost:54804/app/jspm_packages/npm/[email protected]/array-collection-strategy.js:30:14)
    at Repeat.processItemsByStrategy (http://localhost:54804/app/jspm_packages/npm/[email protected]/repeat.js:168:31)
    at Repeat._processItems (http://localhost:54804/app/jspm_packages/npm/[email protected]/repeat.js:129:14)error @ aurelia-logging-console.js:62log @ aurelia-logging.js:36error @ aurelia-logging.js:69processResult @ aurelia-router.js:1616(anonymous function) @ aurelia-router.js:1569run @ es6.promise.js:107(anonymous function) @ es6.promise.js:121flush @ $.microtask.js:25
aurelia-logging-console.js:62 ERROR [app-router] Router navigation failed, and no previous location could be restored.error @ aurelia-logging-console.js:62log @ aurelia-logging.js:36error @ aurelia-logging.js:69restorePreviousLocation @ aurelia-router.js:1658processResult @ aurelia-router.js:1619(anonymous function) @ aurelia-router.js:1569run @ es6.promise.js:107(anonymous function) @ es6.promise.js:121flush @ $.microtask.js:25

This seems to happen when the workflow-report is marked as @containerless()

The CssAnimator needs to implement the missing interface methods:

• animate
  which under the hood calls addClass and after successful animation the removeClass method
• runSequence
  accepts an array of animations, returns on Promise.all

Hi,
I've prepared code on plunker:
http://plnkr.co/edit/00Rq7W?p=preview

As you can see list animation works fine in Chrome and Edge but in Firefox it doesn't.

This is actualy connected with issue #39 (external css).
I found out that usage of cssRules of an external styleSheet in Firefox throws "SecurityError" exception. This is the the case in line 154 of animator.js.
The only working "fix" I found is to wrap access to cssRules with try/catch.

Plunker Example:
http://plnkr.co/edit/ZTqND2?p=preview

Transitions applied to elements that do not have the au-animate attribute on them are affected by the animator in that the element is hidden immediately after the transition has completed. Bug only appears where "show.bind" condition is applied to the same element. The same issue doesnt seem to occur with if.bind.

Simple example above where a fadeIn affect ends with the element being hidden where show.bind is used.

Once the element is hidden, the transition effect no longer works if re-applied.

Bug also present in latest version of aurelia animator (1.0.0-beta.1.2.0).

Thanks

Am wondering if it would be possible to do concurrent transitions between the outgoing and incoming views?

Basically, the outgoing view is animated out while at the same time the incoming view is animated in.

Typically, if navigating down a hierarchy of views, the parent would slide out to the left, while the target child would slide in from the right.

Unhandled rejection TypeError: el.addEventListener is not a function on aurelia-animator-css.js?:30:10.

Adapt to new syntax configure for plugins

To reproduce:

1. Include an element with a repeat.for over an array.
2. Add opacity transition lasting 0.1 second to each repeated item.
3. Add 25 items to list.
4. Add another 25 items to list after 0.05 seconds.

With only 50 animated items on the screen at one time coupled with the short animation time the animationend event can fire before the callback that was supplied to the animationstart event fires. As this code doesn't register for the animationend event until the animationstart callback fires the consequence is the animationend event will never be detected and promise chains will go unresolved.

The solution is to subscribe to both events at the same time, you can test that the start event fired by setting a flag.

I have a fix in the works for this built on top of #33 so I suppose I'll submit it when that has been merged.

These two changes together make repeat.for + animations rock solid for me :)

Excuse me, how to use this plugin ? I don`t find the doc from aurelia.io.

Add a nice way to define staggering animations. The current approach is that the user would have to define a custom animation-delay by himself:

.myrepeater.au-enter:nth-child(1) {
    -webkit-animation-delay: 1s;
}
.myrepeater.au-enter:nth-child(2) {
    -webkit-animation-delay: 2s;
}

maybe we could add a new class with a delay suffix which gets parsed by the animator. Something like this:

.myrepeater.au-enter.au-stagger-100 {
  ...
}

I believe I have found an issue using the custom animation trigger (animator.animate(...)). The aurelia-animator-css.js has a fixed timeout (this.animationTimeout = 50), which was causing my animations to not start 50% of the time. Basically the animation needs to start, trigger "webkitAnimationStart animationstart", and get to this line of code "_this7._addAnimationToStack(animId);" within 50ms or the timeout (setTimeout) triggers and all is lost. I increased the timer to 100ms and all is good, but not sure if this arbitrary time increase is a robust fix. Given it is hard to predict the worst case environment/speed 100ms may not be sufficient.