向 ng-repeat 添加滑动过渡 div

Question

我们的团队在 ServiceNow 中创建了一个小部件，当单击图标时，它会在 div 中显示一行图标和 show/hide 其他详细信息。这就是我们的 html 和客户端控制器的样子：

<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">
      <a href="{{link.link_url}}">{{link.link_title}}</a>
    </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);
}

一切正常，但我们想通过向 .linkList class 添加滑动效果来改进它。现在，当点击一个图标时，.linkList div 会突然出现。有没有办法使用css向div添加滑动过渡效果？

Answer 1

您可以通过纯 css 动画来解决这个问题。将此 css 应用于我们 hidden/shown 的项目。动画会随时播放 css 属性 'display' 会改变。我猜是 linkList 元素？

.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;
  }
}

编辑：您可能需要将 linkList 上的 ng-if 更改为 ng-show。

Answer 2

来自文档：

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.

有关详细信息，请参阅

AngularJS Developer Guide - Animations

向 ng-repeat 添加滑动过渡 div

Adding sliding transition to ng-repeat div

css

css-transitions

angularjs

servicenow