Angular JS 1.3 - 动画化 Ng-Repeat 和 Ng-Show 元素

Question

我有一个包含 ng-repeat 项的列表。任何时候只显示其中一项，其余项使用 ng-show.

隐藏

<div ng-app="myApp" ng-controller="myController">
    <div class="test" ng-repeat="(key, object) in textData" ng-show="index == key">
        {{object}}
    </div>
<div>

我使用 $interval

循环元素

var myApp = angular.module('myApp', ['ngAnimate']);

myApp.controller('myController', function($scope, $interval){

    $scope.index = 1;
    $scope.changeIndex = function(){
        if($scope.index == 3){
            $scope.index = 1;
        }
        else{
            $scope.index = $scope.index + 1;
        }
    };
    $interval($scope.changeIndex, 3000);

    $scope.textData = {
        1: 'one',
        2: 'two',
        3: 'three'
    };

});

我想用淡入淡出效果为元素之间的过渡设置动画。我尝试使用

.test.ng-move{
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity:0;
}

但这似乎不起作用。

如何使用 Angular 1.3 实现这种动画效果？

JSFiddle

Answer 1

我认为 showing/hiding 中的元素不会给您带来您想要的效果，因为它们的顺序始终相同。但是要完成您的要求，您需要 将 class 定位为 added/removed 以淡出 ，并 basic class 淡入：

.test.ng-hide{
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;
  opacity:0;
}

.test{
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;
  opacity:1;
}

ng-hide是在ng-show="{{ falsy }}"的时候加上的。 test 只是您显示的状态。

这是您的更新 Fiddle。希望这会让您走上正轨。

Angular JS 1.3 - 动画化 Ng-Repeat 和 Ng-Show 元素

Angular JS 1.3 - Animating Ng-Repeat and Ng-Show Elements

angularjs

angularjs-animation