如何在 Angular/Twitter-bootstrap 中为滑动列表（上/下）设置动画？答案

【问题标题】：How to animate a slided list (up / down) in Angular/Twitter-bootstrap?如何在 Angular/Twitter-bootstrap 中为滑动列表（上/下）设置动画？
【发布时间】：2017-09-17 10:25:53
【问题描述】：

帮助您的互联网伙伴，好吗？ :)

我正在尝试以角度制作一个平滑的上下滑动列表，但我就是想不通。我对 CSS 没有太多经验，我还在学习，但我尽力了：http://codepen.io/anon/pen/MmyeXb

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>

CSS

.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 中的列表项设置动画？

提前致谢！

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap css-animations

【解决方案1】：

我不是很清楚你。如果您需要阻止动画移除项目，请执行以下操作：

CSS

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

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

更新

我想我也找到了你在找的东西

您可以使用 ng-leave 绝对定位来制作幻灯片，因此不会占用空间。

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

Example

【讨论】：