Question

我正在尝试向我的应用添加可折叠元素。我不想使用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;
}

Answer 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

具有角度和角度的折叠元件上的平滑过渡仅限css

1 个答案: