Javascript 如何在Angular/Twitter引导中设置滑动列表（向上/向下）的动画？

帮助你的网络伙伴，好吗！：）

我试图在角度上做一个平滑的上下滑动列表，但我就是想不出来。我对CSS没有太多经验，我还在学习，但我尽了最大努力：

HTML

<div class="text-center" ng-app="myApp" ng-controller="ItemCtrl">

  <!-- button up -->
  <button class="btn btn-success" ng-click="up()">up</button>

  <div style="width: 25%;margin-left: 37%" class="bg-info p-3 container">
    <ul class="list-group">

      <!-- list item to be animated -->
      <li class="list-group-item m-1" ng-class="slide=='up' ? 'slide-up':'slide-down '" ng-repeat="item in items">
        {{item}}
      </li>

    </ul>
  </div>

  <!-- button down -->
<button class="btn btn-success" ng-click="down()">down</button>  

</div>

JS

.slide-up.ng-enter {
    animation: slideInDown 1s;
  -webkit-animation: slideInDown 1s;
}


.slide-up.ng-leave {
    animation: slideOutDown 1s;
  -webkit-animation: slideOutDown 1s;

}

.slide-down.ng-enter {
    animation: slideInUp 1s;
  -webkit-animation: slideInUp 1s;
}

.slide-down.ng-leave {
    animation: slideOutUp 1s;
  -webkit-animation: slideOutUp 1s;

}

angular.module('myApp', ['ngAnimate'])
.controller('ItemCtrl', function($scope) {
  $scope.items = [1,2,3,4,5];



  $scope.up = function() {
    $scope.slide='up';
      $scope.items.splice($scope.items.length-1, 1);
      $scope.items.unshift($scope.items[0]-1);
  }

    $scope.down = function() {
      $scope.slide='down';
      $scope.items.splice(0, 1);
      $scope.items.push($scope.items[$scope.items.length-1]+1);
  }
});

要删除的列表项在动画完成之前仍会占用空间，这看起来不太好。关于我应该如何处理这个问题，有什么建议吗？有没有更好的方法在angular中设置列表项的动画

---

提前谢谢

我不太明白你的意思。如果需要防止删除项目的动画，请执行以下操作：

CSS

更新

我想我找到了你要找的东西

您可以使用ng使幻灯片保持绝对位置，这样不会占用空间

.slide-up.ng-leave {
   position: absolute;
   bottom: 0px;
   left: 0;
   width: 100%;
   animation: slideOutDown 1s;
   -webkit-animation: slideOutDown 1s; 
 }


.slide-down.ng-leave {
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  animation: slideOutUp 1s;
  -webkit-animation: slideOutUp 1s;
 }

别忘了这一点

 ul {
    position: relative;
    padding-left: 0;
    margin-left: 0;
    height: 100%;
    overflow: hidden;
 }

 ul {
    position: relative;
    padding-left: 0;
    margin-left: 0;
    height: 100%;
    overflow: hidden;
 }