ng-repeat指令的动画问题

Question

动画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

这是默认页面：

当我点击“显示更多”按钮时，“显示更多”按钮会出现一个奇怪的问题。只有当我将'animate-repeat'类应用于'ng-repeat'时才会出现问题指令。我怎么能摆脱这个？任何帮助将受到高度赞赏。

Answer 1

尝试在行上添加clearfix

class="row clearfix . .