Angular/Twitter-Bootstrapでスライドリストを（上/下）アニメートするにはどうすればいいですか？

Question

あなたのインターネットバディを助けよう！ :)

私はスムーズに滑り落ちるようにしています。&ダウンリストは角度がありますが、わかりません。私は、CSSとあまり経験ないんだけど、私はまだ学んでいるが、私はそれを私の最高のショットました：JShttp://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); 
    } 
}); 

削除されるリスト項目は、アニメーションが完了するまでまだ空間を占めていますが、それはあまり良くありません。どのように私はこれにアプローチする必要があります上の任意のアドバイス？リストアイテムをアニメーション化するためのより良い方法はありますか？

ありがとうございます！

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

UPDATEまた

私は私はあなたが

あなたがでスライドを作ることができます探しているものを見つけたと思います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

を忘れないでください