Take a look at this Plunker, where the animation for adding an item only seems to work properly after an item has been deleted from the list. Any suggestions on how to resolve this issue?
Here is the CSS code:
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
height: 0px;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity:1;
height: 30px;
}
.repeat-item {
background: green;
margin-bottom: 5px;
height: 30px;
}
And here is the HTML code:
<div ng-repeat="item in items " class="repeat-item">
{{item}} <span class="delete" ng-click="remove($index)">delete</span>
</div>
<div ng-click="add($index)">add</div>