javascript - 仅使用 Angular 和 css 在折叠元素上平滑过渡

Question

我正在尝试向我的应用添加一个可折叠元素。除了 Angular，我不想使用 jQuery 或任何其他依赖项。

我在这里构建了一个非常简单的演示:http://jsfiddle.net/eg69cfub/2/

元素正确显示/隐藏唯一的问题是过渡。 我不明白为什么这么突然，我希望它是平滑的。

请问我该如何解决这个问题？

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

在 Angular 中，您可以使用 ng-animate 通过 ng-show 指令(以及许多其他指令)执行流畅的动画。这是你的动画 fiddler :http://jsfiddle.net/fu2jw6j1/

您的 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>

这是 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; }

您可以在 Angular 的文档中找到有关 ng-animate 指令的更多信息:https://docs.angularjs.org/api/ngAnimate