au-animate repeat about animator-css HOT 9 CLOSED

Hi @SiddiqueAhmad, could you please explain what the problem is? I didn't understand it from your question. Why should it be slow? Inside your template, let's say it's a series of LI elements, you just add the class:

<ul>
  <li repeat.for="item of serviceItems" class="au-animate">${item.name}</li>
</ul>

from animator-css.

<div class="col-sm-6 col-md-3 au-animate flickr-img " repeat.for="item of items">
          <a class="thumbnail">
            <img src.bind="item.itemImage"/>
          </a>
          <div class="caption">
          <h3>${item.itemName}</h3>
          <p>Retail: ${item.price}</p>
          </div>
        </div>

when i update items via service, it just become too slow

i was using au-animate class

from animator-css.

@zewa666 is it clear now

from animator-css.

not really sry, the only reason I could see is that you use a too long lasting animation and it feels too slow. Take a look at the skeleton navigation example and the flickr page, where we do exactly the same without any real performance issue.

from animator-css.

i used the same from flickr, just was trying to filter and it become dead slow, i removed the au-animate and it was all fine, i discussed the same on gitter channel too

from animator-css.

this is gist where i have added code
https://gist.github.com/SiddiqueAhmad/4c3d1c4c88222edd3d22

from animator-css.

can I ask you to create a github repo, reproducing the error, it's hard to spot the issue that way without seeing what animation are happing.

from animator-css.

yes, here it is

https://github.com/SiddiqueAhmad/aurelia-working

go to search route, click active button, click 2 3 times

from animator-css.

Thanks for the repo 👍
Ok I think I understand what you're talking about. Is it the removal of elements which acts slowly for you? This actually happens because you're using staggered animations in your example https://github.com/SiddiqueAhmad/aurelia-working/blob/master/styles/styles.css#L55

those timeouts are added up on each item and also apply for the leave-animation. So essentially reducing the staggering time or removing it at all if you don't need it would fix the issue.

Perhaps an idea would be to define 3 types of staggering classes.

• .yourclass.au-stagger works for both enter/leave
• .yourclass.au-stagger-enter staggering only for enter animations
• .yourclass.au-stagger-leave staggering only for leave animations

in that case you could keep the staggered enter animations but ignore them for leave, which is triggered by setting the items array to an empty array like here https://github.com/SiddiqueAhmad/aurelia-working/blob/master/src/search.js#L35

from animator-css.