0

I have ng-repeat and I want to change the enter/leave animation based on variable from the controller(vm). I found this (http://www.nganimate.org/) but its for angular 1.1.5 and I am using 1.5. How can I do that? Thanks!

RisingStar
  • 63
  • 5

2 Answers2

0

Just create a few animation classes in your style sheet and then switch them via ng-class based on whatever variable from the vm you like. Below could be your markup:

<ul>
  <li ng-repeat="item in vm.items track by item.id"
      ng-class="{
        'animation-1-class': vm.varOfYourChoice,
        'animation-2-class': !vm.varOfYourChoice
      }"
  ></li>
</ul>

And your style sheet:

.animation-1-class.ng-enter,
.animation-1-class.ng-leave.ng-leave-active { ... }

.animation-1-class.ng-leave,
.animation-1-class.ng-enter.ng-enter-active { ... }

.animation-2-class.ng-enter,
.animation-2-class.ng-leave.ng-leave-active { ... }

.animation-2-class.ng-leave,
.animation-2-class.ng-enter.ng-enter-active { ... }

And here is the relevant documentation on angular animations for the version of AngularJs you're using.

xReeQz
  • 320
  • 1
  • 7
0

The problem was that if I create css with the same name as animation.css, the animation.css always take over, so I just add a prefix to my class, and its fixed the problem.

RisingStar
  • 63
  • 5