0

I'm attempting to animate a subdirective that gets generated with an ng-repeat inside a directive. I've managed to successfully animate one of my ng-repeats with a ng-stagger included so i know the library is working.

For some reason the class of .group animates to enter and leave but the ng-stagger is completely ignored as well, however the .menu-group-item never gets an animation, even without animating .group.

Currently I have my directive set up as such,

The directive menu_items repeats through its attribute groups

ul.menus.fat
  li.group(ng-repeat='group in groups' ng-class-even="'alt-row'")

Then it loops through each group.items passing them to a subdirective

ul.menu-group-items(ng-show='group.items && group.items.length > 0')
  li.menu-group-item(ng-repeat='item in group.items track by item.id' ng-class-even="'alt-row'")
    menu-item(item='item')

CSS

ul.menus .menu-group-item {
  color: #81807e;
  line-height: 2.5em;
  padding: 0 10px;
  margin: 0 -10px;
  cursor: pointer;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}


ul.menus .group.ng-enter,
ul.menus .group.ng-leave,
ul.menus .menu-group-item.ng-enter
ul.menus .menu-group-item.ng-leave {
   -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  position: relative;
  display: block;
}

ul.menus .group.ng-leave.ng-leave-active,
ul.menus .menu-group-item.ng-leave.ng-leave-active,
ul.menus .group.ng-enter,
ul.menus .menu-group-item.ng-enter {
  opacity: 0;
}

ul.menus .group.ng-enter.ng-enter-active,
ul.menus .menu-group-item.ng-enter.ng-enter-active,
ul.menus .menu-group-item.ng-leave,
ul.menus .group.ng-leave {
  opacity: 1;
}

ul.menus .menu-group-item.ng-enter-stagger,
ul.menus .menu-group-item.ng-enter-stagger,
ul.menus .menu-group-item.ng-leave-stagger,
ul.menus .group.ng-leave-stagger,
ul.menus .group.ng-move-stagger,
ul.menus .group.ng-move-stagger {
  -webkit-transition-delay: 10s;
  transition-delay: 10s;
  -webkit-transition-duration:0;
  transition-duration:0;
}

Why does this not animate and why does the animation that does work the stagger doesn't? My ideal objective is to only animate the .menu-group-item items since there part of the .group.

MikaAK
  • 2,334
  • 6
  • 26
  • 53
  • I had provided an [answer earlier here](http://stackoverflow.com/questions/25287517/cant-trigger-animation-on-nested-ngrepeat/25289240#25289240) relating to getting the children animated, probably yours is also similar? Try adding `ng-animate-children` attribute on the parent – PSL Sep 30 '14 at 01:08
  • Unfortunately this didn't work :( `li.group(ng-repeat='group in groups' ng-class-even="'alt-row'" ng-animate-children)` – MikaAK Sep 30 '14 at 02:52
  • Can you prepare a demo in a plunkr? – PSL Sep 30 '14 at 02:53
  • http://plnkr.co/edit/4TSOri7CkWLc1XoLbCjD?p=preview sorry if its not exact it was a bit of a pain to create haha – MikaAK Sep 30 '14 at 04:46
  • I've managed to solve the children not animating, it was due to jade getting changed from `ng-animate-children` to `ng-animate-children='ng-animate-children'` But still the `ng-enter-stagger` or `ng-leave-stagger` has yet to take effect for some reason. – MikaAK Sep 30 '14 at 17:32
  • Yeah it looks like it is fine. I noticed it takes a while when clicked on reload.. is that what your issue is? – PSL Sep 30 '14 at 17:52
  • @PSL if you notice in the plukr it doesn't animate the `.groups` still. Now it only animates the children – MikaAK Sep 30 '14 at 18:32

0 Answers0