CODEWITHSUNDEEP
angularjsanimation
sammiwei
sammiwei

Reputation: 3210

How do I disable enter animation in angular js version 1.2.0

I have used the example on http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

I am able to get the animations to work. But I would like to ONLY have the leave animation. Is there a way to do it? I have tried to get rid of the .repeat-item.ng-enter in my css, unfortunately did not work. Any insights? Thanks! My Javascript:

<tr ng-repeat="item in m.itemList" class="repeat-item">

My CSS:

.repeat-item.ng-enter,
.repeat-item.ng-leave {
  -webkit-transition:1s linear all;
  transition:1s linear all;
}

.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
  opacity:0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
  opacity:1;
}

My updated CSS:

.repeat-item.ng-leave {
  -webkit-transition:1s linear all;
  transition:1s linear all;
}

.repeat-item.ng-leave.ng-leave-active {
  opacity:0;
}
.repeat-item.ng-leave{
  opacity:1;
}

In my updated CSS, I got rid of anything related to ng-enter but still got the animation for entering.

Upvotes: 1

Views: 270

Answers (1)

Ilan Frumer
Ilan Frumer

Reputation: 32397

For me It's working !

here is a working example

.repeat-item.ng-leave {
  -webkit-transition:1s linear all;
  transition:1s linear all;
}

.repeat-item.ng-leave.ng-leave-active {
  opacity:0;
}
.repeat-item.ng-leave{
  opacity:1;
}

Upvotes: 2

Related Questions