带有 ng-repeat 和基础手风琴的动画答案

【问题标题】：Animations with ng-repeat and foundation accordion带有 ng-repeat 和基础手风琴的动画
【发布时间】：2015-03-05 19:49:37
【问题描述】：

我正在使用 angularjs Foundation 的手风琴，下面是手风琴的代码 sn-p 我想在活动时设置上下滑动的动画：(http://pineconellc.github.io/angular-foundation/)

<div class="row fullWidth">

  <div class="small-12 columns">

    <div ng-controller="AccordionController">

      <accordion close-others="oneAtATime">

        <accordion-group ng-repeat="(category, models) in categories" is-open="isopen" ng-class="{ active: isopen }" class="model-list">
          <accordion-heading>
            <span>
                                {{ category | uppercase }}
                                </span>
            <i class="right" ng-class="{'fa fa-angle-up fa-2x': isopen, 'fa fa-angle-down fa-2x': !isopen}"></i>

          </accordion-heading>
          <div ng-click="nextPage(model.code)" class="animate-repeat" ng-repeat="model in models" class="panel">
            <div class="row">
              <div class="small-7 columns left">
                <h3>{{model.name}}</h3>
                <h6>MSRP {{model.price | currency:number:0}}</h6>
                <h6 class="easyride">{{ 231 | currency:number:0 }} / Month*</h6>
              </div>
              <div class="small-5 columns right">
                <img ng-src="{{model.defaultImage}}">
              </div>
            </div>
            <hr>
          </div>
        </accordion-group>

      </accordion>

    </div>

  </div>

</div>

这里是 CSS：

//  Model list animation

.animate-repeat {
  line-height:40px;
  list-style:none;
  box-sizing:border-box;
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
  opacity:0;
  max-height:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
  opacity:1;
  max-height:40px;
}

我尝试在 div 上添加动画类，但它不会动画。有关如何解决此问题的任何建议？

【问题讨论】：

标签： javascript css angularjs animation zurb-foundation

【解决方案1】：

我通过使用 angular-ui bootstrap 的折叠指令 (https://github.com/angular-ui/bootstrap/blob/master/src/collapse/collapse.js) 和手风琴组的自定义模板解决了这个问题：

<script id="template/accordion/accordion-group.html" type="text/ng-template">
    <dd>
        <a ng-click="isOpen = !isOpen" ng-class="{ active: isOpen }"  accordion-transclude="heading">{{heading}}</a>
        <div class="content" collapse="!isOpen" ng-transclude></div>
    </dd>
</script>

以及用于折叠的引导 CSS：

.collapse {
    display: none;
    visibility: hidden;
}
.collapse.in {
    display: block;
    visibility: visible;
}
tr.collapse.in {
    display: table-row;
}
tbody.collapse.in {
    display: table-row-group;
}
.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-property: height, visibility;
    -o-transition-property: height, visibility;
    transition-property: height, visibility;
}

要隐藏嵌套折叠添加：

.collapse:not(.in) .collapse {
    display: none;
    visibility: hidden;
}

【讨论】：