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 ?
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.
display: table-row). They can't have some porperties (e.g. margin) but you can play with others (e.g. opacity). If you want to be able to manipulate certain properties, you can temporarily set display: block but it isn't going to look very impressive. See an example here. BTW, if you fell this post better answers your original question, please mark it as accepted.Just give class to your <ul> like this.
<ul class="my-anim" ng-repeat="item in items">
<li class="top">{{item}}</li>
</ul>
