apply css animation to specific html element using angularjs - css

Question

please check first the demo on plnkr.
My problem is: this animation will be applied to all elements in html,
cause in css is defined .ng-enter .ng-leave etc.
I am trying to apply it to a specific class name. In my case, it's <li class="specific">
And in CSS I've tried following:
.specific.ng-enter /*(does not work)*/
.specific-ng-enter /*(does not work)*/
With these code above, I can add and remove items but without animation.
How should the code be in css ?

Answer 1

Actually, there are a couple of possible issues with the code:
You are using ngRepeat on your <ul> (I cannot be 100% sure that this is not what you want but it is highly improbable). ngRepeat will "repeat" (clone" the element it is on, so in your case you are creating multiple <ul> elements (instead of multiple <li> elements, as one would expect).
Moving ngRepeat o the <li> will solve the animation problem and result in the intended HTML code (1 <ul>, multiple <li>).
Your CSS defined transition with every class, while it would suffice to define one rule:
.top.ng-enter, .top.ng-leave {
// ...define transitions here
}
In order to avoid possible CSS specificity issues (especially later on, when your CSS grows in size and complexity), you should include the .ng-enter/leave class selector in the rules with .ng-*-active:
// Instead of just:
.top.ng-enter-active {...
// You should use:
.top.ng-enter.enter-active {...
Finally, you can group identical rules together, to save space and make your code more DRY (e.g. .top.ng-enter rule === .top.ngleave.ng-leave-active rule).
Your final code should look like this:
<!-- HTML -->
<ul>
<li class="top" ng-repeat="item in items">{{item}}</li>
</ul>
/* CSS */
.top.ng-enter,
.top.ng-leave {
-webkit-transition: 1s;
transition: 1s;
}
.top.ng-enter,
.top.ng-leave.ng-leave-active {
margin-left: 100%;
}
.top.ng-enter.ng-enter-active,
.top.ng-leave {
margin-left: 0;
}
See, also, this short demo.

Answer 2

Just give class to your <ul> like this.
<ul class="my-anim" ng-repeat="item in items">
<li class="top">{{item}}</li>
</ul>
Working Demo