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

【问题标题】：Smooth transition on collapsing element with angular & css only仅具有角度和 css 的折叠元素上的平滑过渡
【发布时间】：2014-11-27 23:45:34
【问题描述】：

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

我在这里构建了一个非常简单的演示：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;
}

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

在 Angular 中，您可以使用 ng-animate 通过 ng-show 指令（以及许多其他指令）执行流畅的动画。这是您的动画提琴手：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

【讨论】：