Angular.js动画

Question

我有一个ng-repeat块，定义如下：

<div ng-show="isPageSelected(item.page)" class="block" ng-repeat="item in data">
  ...
</div>

目前，我可以通过单击某些元素在这些块之间切换。正如您可能已经猜到的那样，它通过ng-show="isPageSelected(item.page)"工作。这一切都很好，但他们是立即切换，我想添加一个动画，一个简单的淡入/淡出就行了。

因此，不再被选中的块应该淡出，当它消失时，一个新块应该消失。当我使用ngAnimate时，它们会同时淡入和淡出。我需要第一个街区完全消失，并与display: none;隐藏，当它完成后，下一个块应该出现和淡入。在使用jQuery时，这是一项相当简单的任务，但我如何使用Angular.js来做到这一点呢？

我强烈怀疑，对于一个动画复杂的网站来说，Angular.js并不是一个很好的选择。

编辑:为了简化我的问题，我需要做的就是

1. 在一个按钮上点击启动一个动画；
2. 当动画完成后，改变模型；
3. 再运行一部动画。

因为我需要在动画之后更改模型，所以很可能不可能通过纯CSS来实现它。我知道触发角中特定元素动画的唯一方法是创建指令，将范围变量传递到指令中，在指令中为该变量创建观察者，然后从控制器中更改变量：

<div animation="page"></div>

app.directive('animation', function(){
    return {
        scope: { page: '=animation' },
        link: function(scope, element){
            scope.$watch('page', function(newVal){
                ...
            });
        }
    };
});

我想这是可行的，但是仅仅为了这个目的创建一个指令看起来真的太臃肿了。另外，只有在动画完成后，我才会用这种方法改变$scope.page呢？添加另一个作用域变量只是为了触发动画，并在动画完成后以某种方式更改$scope.page？使用ngFx模块可以做到这一点，但是它所需的代码数量实在是太荒谬了。在这一点上，我认为向控制器添加jQuery动画将是一个更漂亮的解决方法。

编辑: jQuery动画就是这样的：

$scope.changePage = function(page) {
  $('.block').animate({opacity: 0}, 500, function(){
    $scope.page.id = page;
    $scope.$apply();
    $(this).animate({opacity: 1}, 500);
  });
};

它工作得很好，也不像使用指令那样冗长，但我必须使用CSS选择器，这让我感觉非常“没有角度”。你们在处理动画时会使用类似的东西吗？

编辑:使用ngFx的方法有点类似

    <div ng-hide="switchPageAnimation" 
             class="block fx-fade-normal fx-speed-300 fx-trigger">

在主计长中：

  $scope.switchPageAnimation = false;

  $scope.changePage = function(page) {
    if($scope.page.id === page || $scope.switchPageAnimation) return;
    $scope.switchPageAnimation = true;
    $scope.$on('fade-normal:enter', function(){
      $scope.page.id = page;
      $scope.switchPageAnimation = false;
    });
  };

我没有使用CSS选择器，但看起来还是很糟糕。我必须为动画定义一个作用域变量，然后检查动画是否已经在运行。我觉得我错过了一些很明显的东西。

Answer 1

也许这会帮助你，在你的情况下，没有必要等待动画的完成。如果您的页面具有css位置:绝对值，并且处于一个容器中，且位置: relative，则它们共享相同的位置，并且在动画中没有在另一个下面显示。使用此设置，您可以交叉淡出或延迟显示动画。

过渡-延迟：

.container1{
    position: relative;
    height:400px;
}

.block1{
    position:absolute;
}
.block1.ng-hide-add-active {
    display: block!important;
    -webkit-transition: 2s linear all;
    transition: 2s linear all;
}
.block1.ng-hide-remove-active {
    display: block!important;
    -webkit-transition: 2s linear all;
    transition: 2s linear all;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}
.block1.ng-hide {
    opacity: 0;
}

http://jsfiddle.net/ncrs4gz0/

编辑:如果您在ng-重复中使用筛选器而不是ng-显示来显示所选页面，则为

<div  class="block1" ng-repeat="item in data | filter:isPageSelected">

然后从dom和角添加类ng-enter、ng-enter-active和ng-leave活动中添加和删除页面。

但是动画可以定义为类似的，参见http://jsfiddle.net/o944epzy/

Answer 2

实际上，您必须使用CSS来向ng重复显示和隐藏元素；使用ngAnimate时，不要忘记将其注入模块中。

.module('myModule', [  'ngAnimate', ...

执行此操作时，将从ng-重复数据源中添加/删除元素。角将添加和删除类ng-enter, ng-leave。这里是一个关于ngAnimate动画的很好的教程。

在您自己的情况下，您希望更改页面。我建议你一次展示的物品太多了。

您可以在作用域中声明两个变量：

$scope.elemByPage = 5;
$scope.page = 0;
$scope.nbPages = ...; // I let you do the maths ;)

在模板中之后，您可以简单地这样做：

<div class="my-repeat-item" data-ng-repeat="item in data | pager:page:elemByPage">
 {{item.xxx}}           
</div>

此模板将仅显示页号和每个页的元素数的函数中所需的项。寻呼机是一个简单的过滤器，它可以完成任务。

.filter('pager',[function(){
        return function(items, page, nbElemByPage) {

            if(!nbElemByPage || nbElemByPage < 1) {
                return items;
            }

            var nbPages = Math.floor(items.length/nbElemByPage);
            if(nbPages<1) {
                return items;
            }

            var startIndex = page*nbElemByPage;

            return items.splice(startIndex, nbElemByPage);
        };
    }])

现在，您只需使用按钮就可以浏览您的项目。

<button data-ng-click="page = page - 1"/>Prev page</button>
<button data-ng-click="page = page - 1"/>Next page</button>

要在新项目上添加淡出动画，请在css中按照项类声明这些类(这里是my-repeat-item)。

.my-repeat-item.ng-enter {
    transition: 0.6s ease all;
    opacity:0;
}
.my-repeat-item.ng-enter.ng-enter-active {
    opacity:1;
}

通过将enter替换为leave，可以在删除项时执行相同的操作。

希望它能回答你的问题。

Answer 3

实际上，您必须使用CSS来向ng重复显示和隐藏元素；使用ngAnimate时，不要忘记将其注入模块中。