Question

帮助你的互联网好友，你好！：）

我正试图以有角度的方式制作一个平滑的向上滑动和向下的列表，但我无法理解它。我不太熟悉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;

}

JS

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

要删除的列表项仍然占用空间，直到动画完成，这看起来不太好。有关如何处理此问题的任何建议？有没有更好的方法来设置角度列表项的动画？

提前致谢！

Answer 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

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

1 个答案: