仅具有角度和CSS的折叠元素上的平滑过渡

Question

I am trying to add a collapsable element to my app. I don't want to use jQuery or any other dependency than Angular.

I have built a very simple demo here: http://jsfiddle.net/eg69cfub/2/

The elements are displayed/hidden properly the only problem is the transition. I don't understand why it is so abrupt, I'd like it to be smooth.

How can I fix this please?

HTML:

<div ng-app>
    <div>
      <ul>
          <li ng-repeat='test in [1, 2, 3]' ng-controller='accordionCtrl'>
              <div class='header' ng-click='isVisible = !isVisible'> Hello {{ test }}</div>
              <div class='body' ng-class='{ collapsed: isVisible }'> Goodbye </div>
          </li>
      </ul>
    </div>
</div>

CSS:

li {
    list-style: none;
}
.header {
    width: 100%;
    background-color: red;
}

.body {
    width 100%;
    background-color: blue;
    display: block;
    min-height: 1px;
    transition: all ease 3s;
    overflow: hidden;
}

.collapsed {
    min-height: 0;
    height: 0;
}

JS:

var myApp = angular.module('myApp',[]);


function accordionCtrl($scope) {
    $scope.isVisible = false;
}

Answer 1

In Angular, you can use ng-animate to perform smooth animations with ng-show directive (along with many other directives). Here is your fiddler with animations: http://jsfiddle.net/fu2jw6j1/

Your HTML:

<div ng-app>
<div>
  <ul>
      <li ng-repeat='test in [1, 2, 3]' ng-controller='accordionCtrl'>
          <div class='header' ng-click='$scope.isVisible=!$scope.isVisible'> Hello {{ test }}</div>
          <div class='box' ng-show="$scope.isVisible" ng-animate="'box'">  Goodbye </div>
      </li>
  </ul>
</div>

And here's the CSS:

li {
    list-style: none;
}
.header {
    width: 100%;
    background-color: red;
}

.box {
    width 100%;
    background-color: blue;
    display: block;
    min-height: 1px;
    transition: all ease 3s;
    overflow: hidden;
    height: 20px;
}

.box-show-setup, .box-hide-setup {
  -webkit-transition:all linear 0.3s;
  -moz-transition:all linear 0.3s;
  -ms-transition:all linear 0.3s;
  -o-transition:all linear 0.3s;
  transition:all linear 0.3s;
}

.box-show-setup { height: 0; }
.box-show-setup.box-show-start { height:20px }

.box-hide-setup {height: 0; }
.box-hide-setup.box-hide-start { height: 0px; }

You can find more about ng-animate directive in Angular's documentation: https://docs.angularjs.org/api/ngAnimate