0

我有一个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

4

1 回答 1

0

我认为通过显示/隐藏其中的元素，您不会得到您想要的效果，因为它们将始终处于相同的顺序。但是要完成您的要求，您需要针对淡出添加/删除的类以及淡入的基本类：

.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。希望这会让你走上正轨。

于 2015-02-24T22:09:42.927 回答