javascript - 使用 ng-repeat 和 foundation accordion 的动画

Question

我正在使用 angularjs 基金会的 Accordion ，下面是 Accordion 的代码片段，我想在事件时为上下滑动设置动画:( 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 上添加动画类，但它不会动画。关于如何解决这个问题有什么建议吗？

Answer 1

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

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