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

我不认为你会通过显示/隐藏元素来获得你正在寻找的影响，因为它们将始终处于相同的顺序。但要完成你的要求，你需要定位为淡出添加/删除的类，以及淡入的基本类：

.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重复和Ng-Show元素

1 个答案: