CODEWITHSUNDEEP
javascriptcssangularjsanimationzurb-foundation
user3562751
user3562751

Reputation: 263

Animations with ng-repeat and foundation accordion

I am using angularjs foundation's accordion and below is the code snippet of the accordion I would like to animate sliding up and down when active: (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>

and here is the 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;
}

I have tried adding the animate class on the div but it will not animate. Any suggestions on how to solve this?

Upvotes: 0

Views: 627

Answers (1)

Daniel
Daniel

Reputation: 11

I solved this by using angular-ui bootstrap's collapse directive (https://github.com/angular-ui/bootstrap/blob/master/src/collapse/collapse.js) and a custom template for 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>

and the bootstrap CSS for collapse:

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

To hide nested collapses add:

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

Upvotes: 1

Related Questions