Adding sliding transition to ng-repeat div - css

Question

Our team has created a widget in ServiceNow that shows a row of icons and show/hide additional details in a div when icons are clicked. This is what our html and client controller looks like:
<div class="icons">
<ul class="flex justify-content-center align-items-center">
<li ng-repeat="item in c.data.linksArray track by $index">
<a class="link" href="javascript:void(0)" ng-click="c.getInfo(item)">
<i title="{{item.titles}}" class='fa {{item.icon}} fa-3x circle-icon'></i>
</a>
</li>
</ul>
</div>
<div class="linkList text-center"
ng-repeat="thing in c.data.linksArray track by $index"
ng-if="thing.isVisible==true">
<ul>
<li class="m-b-sm" ng-repeat="link in thing.links">
{{link.link_title}}
</li>
</ul>
</div>
function($scope) {
/* widget controller */
var c = this;
c.getInfo = function(item) {
var isDisplaying = false;
if(item.isVisible== true){
isDisplaying = true;
}
for(var i=0; i<c.data.linksArray.length; i++){
c.data.linksArray[i].isVisible = false;
}
if(isDisplaying == true){
item.isVisible = false;
}else{
item.isVisible=!item.isVisible;
}
}
console.log('icon-link-list');
console.log($scope);
}
This all works fine, but we'd like to refine it by adding a sliding effect to the .linkList class. Right now, when an icon is clicked, the .linkList div appears very abruptly. Is there a way to add a sliding transition effect to that div using css?

Answer 1

You can solve this by pure css animations. Aplly this css to the item which will we hidden/shown. The animation will play anytime css attribute 'display' will change. I guess it's the linkList element?
.linkList {
animation: slideFromLeft .2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
opacity: 0;
}
#keyframes slideFromLeft{
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: none;
}
}
Edit: you maybe have to change ng-if on linkList to ng-show.

Answer 2

From the Docs:
Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class attached to an HTML element within your application, you can apply animations to it.
As ngRepeat does its thing, each time a new item is added into the list, ngRepeat will add an ng-enter class to the element that is being added. When removed it will apply an ng-leave class and when moved around it will apply an ng-move class.
For more information, see
AngularJS Developer Guide - Animations