Angular JS 1.3动画Ng重复和Ng-Show元素

debugcn 发表于 Dev

劳埃德银行

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

史蒂芬·巴克（Stephen J Barker）

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

.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只是您显示的状态。

这是您更新的小提琴。希望这能使您走上正确的道路。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。