Angularjs - Как медленно свернуть и расширить аккордеон с помощью анимации - PullRequest
0 голосов
/ 05 января 2019

Я использую angularjs и у меня есть простой аккордеон с растяжением и коллапсом, все работает нормально, но здесь, когда я расширяю div, оно должно расширяться медленно и аналогично, когда я снова сворачиваюсь, оно должно разрушаться медленно. Вот я использую isopen для развернуть в angularj. Никто не может мне помочь, ниже мой код, https://plnkr.co/edit/nCdGzZYPSTYsMPYf8K9o?p=preview

HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script  src="js/index.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
 <body ng-app="app">
    <h1>Dynamic accordion: nested lists with html markup</h1>   
  <div ng-controller="AccordionDemoCtrl">
    <div>
      <div  ng-repeat="group in groups track by $index">
        <div class="parents"  ng-click="open($index)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}        
        </div>
        <div class="childs" ng-show="group.isOpen">ddddd</div>

      </div>
    </div>
  </div>
  </body>

index.js

var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.open = function (index) {
    $scope.groups[index].isOpen = !$scope.groups[index].isOpen;
    $scope.closeOthers(index);
  }

  $scope.closeOthers = function (index) {
    for(var i = 0; i  < $scope.groups.length; i++) {
       if (i !== index)
        $scope.groups[i].isOpen = false;
    }
  }

  $scope.groups = [
    {
      title: 'title 1',

      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a']
    },
    {
      title: 'title 2',

      list: ['item1b',
        '<b>item2b </b> blah ',
        'item3b'] 
    },
    {
      title: 'title 3',

    },
    {
      title: 'title 4',

    },
    {
      title: 'title 5',

    }
  ];
$scope.groups[0].isOpen = true;
});

1 Ответ

0 голосов
/ 05 января 2019

Вы можете использовать максимальную высоту css и добавить переход, чтобы сделать коллапс и медленно расширяться

.childs {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.childs.showChild {
    max-height: 1000px;
}
<ul class="childs" ng-class="{'showChild': group.isOpen}">
    <li ng-repeat="item in group.list">
        <span ng-bind-html="item"></span>
    </li>
</ul>
Посмотреть демо https://plnkr.co/edit/Gm7oe8l3ZBXyWTe3Okm4?p=preview
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...