CODEWITHSUNDEEP
angularjshtmlcss
Sampath
Sampath

Reputation: 65860

Animation issue with ng-repeat directive

Animation CSS

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

HTML

     <div class="row item animate-repeat" ng-repeat="comment in Event.Item.Comments | limitTo: Event.CommentsLimit">
   <div class="col-sm-1 col-sm-offset-1"></div>
      <div class="col-sm-9">
         <h3>

        </h3>
     </div>
   </div>
     <div class="row">
      <a class="show-more" </a>
     </div>

OUT PUT

This is the default page :

enter image description here

When I click the 'Show More' Button,it'll have a strange issue with the 'Show More' button.This is happing only when I have applied the 'animate-repeat' class to the 'ng-repeat' directive.How can I get rid of this ? Any help would be highly appreciated.

enter image description here

Upvotes: 0

Views: 88

Answers (1)

Dylan
Dylan

Reputation: 4773

Try adding clearfix on your rows, 

class="row clearfix . .

Upvotes: 1

Related Questions