angularJS删除动画，＆＃34;复制＆＃34;动画期间的项目

Question

我是AngularJS的新手，我想删除ng-repeat中的项目时动画。

我设法让动画没有问题，但我有一点问题。

在动画期间，我们可以看到另一个＆＃34;项目＆＃34;消失的那个背后。 在附带的屏幕截图中，我突出显示消失的块，我们看到另一个块：

我正在使用这个CSS：

.rule-list {
  -webkit-transition: color 0.6s, background-color 0.3s;
  -moz-transition: color 0.6s, background-color 0.3s;
  -ms-transition: color 0.6s, background-color 0.3s;
  transition: color 0.6s, background-color 0.3s;
    opacity:1;
}
.rule-list.ng-enter {
    -webkit-animation: fadeInLeft 1s;
    -moz-animation: fadeInLeft 1s;
    -ms-animation: fadeInLeft 1s;
    animation: fadeInLeft 1s;
  }

.rule-list.ng-leave {
    -webkit-animation: fadeOutLeftBig 1s;
    -moz-animation: fadeOutLeftBig 1s;
    -ms-animation: fadeOutLeftBig 1s;
    animation: fadeOutLeftBig 1s;
}

我的模板：

<div ng-repeat="rule in rules" class="panel panel-default rule-list" >
    <!-- Rule 1 -->
    <div class="panel-heading">
        <div class="panel-btns">
            <a class="minimize" href="">−</a>
        </div>
        <h4 class="panel-title">{{rule.name}}</h4>
    </div>
    <div class="panel-body" style="display: block;">
        <p>
            If <strong>{{rule.condition}}</strong> includes <strong>"{{rule.text}}"</strong>
            then <strong>{{rule.action}}</strong>
        </p>
        <p>
            <a class="text-danger" ng-click="remove($index)">Delete Rule</a>
        </p>
    </div>
    <!-- panel-body -->

</div>

和我的控制器

    .controller('RulesController', function($scope, $stateParams) {

    $scope.rules = [
        {
            "name": "Rule 1",
            "condition": "email to",
            "text": "@***.com",
            "action": "exclude email"
        },
        {
            "name": "Rule 2",
            "condition": "email from",
            "text": "@***.fr",
            "action": "exclude email"
        },
        {
            "name": "Rule 3",
            "condition": "email from & to",
            "text": "@***.eu",
            "action": "exclude email"
        },
        {
            "name": "Rule 4",
            "condition": "email from & to",
            "text": "****",
            "action": "exclude email"
        },
    ];
        $scope.remove = function(index){
            console.log('remove '+index)
            $scope.rules.splice(index, 1);

        }

    })