0

絶対配置 div のリストから要素を削除すると、そのアクションの ngAnimate アニメーションが期待どおりに実行されません。以下は例です

HTML

<div ng-app="myApp">
    <div ng-controller='ctrl'>
        <button ng-click='clicked()'>Remove element</button>  
        <div class='myDiv' ng-repeat="item in items" style="left:{{$index*100}}px;top:50px">
            {{item}}
        </div>
    </div>
</div>

CSS

.myDiv{
    position: absolute;    
    width:100px;
    height:100px;
    background-color:#432344;
    -webkit-transition: opacity .1s linear;
    -moz-transition: opacity .1s linear;
    -o-transition: opacity .1s linear;
    transition: opacity 1s linear;
    opacity: 1;
    border: 5px solid #123123;
}
.myDiv.ng-leave-active {
    opacity: 0;
}

JavaScript

angular.module('myApp',['ngAnimate'])
  .controller('ctrl', function ($scope){
    $scope.items = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6' ];
    $scope.clicked = function(){
       $scope.items.splice(0,1);       
    }
  });

JSFiddle:リンク

基本的に何が起こっているかというと、要素がすぐに削除され、他の要素が代わりに配置され、削除された要素のアニメーションが実行されますが、他の要素がその上にあるため表示されません (つまり、angular は要素を削除し、リスト全体を再レンダリングし、アニメーションを実行します)。そのため、要素が 1 つしかない場合でも、アニメーションは正常に機能します。

必要なのは、最初にアニメーションを実行してから、リスト全体を再レンダリングすることです。誰もこれを行う方法を知っていますか?

4

1 に答える 1

1

プロパティにもトランジションを適用する必要がありleftます。

だから変える

transition: opacity 1s linear;

に

transition: all 1s linear;

また

transition: opacity 1s linear, left 1s linear;
于 2015-10-23T22:15:25.223 に答える