Добавление скользящего перехода в ng-repeat div - PullRequest
Новая
       10

Добавление скользящего перехода в ng-repeat div

1 голос
/ 21 февраля 2020

Наша команда создала виджет в ServiceNow, который показывает ряд значков и показывает / скрывает дополнительные детали в элементе div при нажатии на значки. Вот как выглядит наш 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. Прямо сейчас, когда по иконке нажимают, div .linkList появляется очень резко. Есть ли способ добавить эффект скользящего перехода к этому div, используя css?

Ответы [ 2 ]

0 голосов
/ 22 февраля 2020

Из документов:

Анимации в AngularJS полностью основаны на CSS классах. Пока у вас есть класс CSS, прикрепленный к элементу HTML в вашем приложении, вы можете применять к нему анимацию.

Когда ngRepeat делает свое дело, каждый раз, когда в него добавляется новый элемент список ngRepeat добавит класс ng-enter к добавляемому элементу. После удаления он будет применять класс ng-leave, а при перемещении - класс ng-move.

Для получения дополнительной информации см.

0 голосов
/ 21 февраля 2020

Вы можете решить это с помощью чистой css анимации. Примените это css к предмету, который мы будем скрывать / показывать. Анимация будет воспроизводиться каждый раз, когда 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;
  }
}

Редактировать: возможно, вам придется изменить ng-if в linkList на ng-show.

...