Javascript Angular.js动画

我有一个

ng repeat

块，定义如下：

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

---

我想这是可行的，但仅仅为它创建一个指令似乎太夸张了。另外，仅当动画完成时，我如何使用此方法更改

$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">

我没有使用CSS选择器，但它看起来仍然很糟糕。我必须为动画定义一个范围变量，然后检查动画是否已经在运行。我觉得我遗漏了一些非常明显的东西。
您可以将所需的转换添加到元素的CSS类中，以显示/隐藏：

animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}

请参阅此处的更多信息：

事实上，使用CSS是一种“正确”的方法，即使它可能感觉不成角度。
也许这会对您有所帮助，而且您不必等待动画完成。如果您的页面具有css position:absolute，并且位于position: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;
}


编辑：
如果您在ng repeat而不是ng show中使用筛选器，则会像这样显示所选页面

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



然后从dom中添加和删除页面，并添加类ng enter、ng enter active和ng LEVE active

但是动画可以定义为类似的see fiddle:
有效地，您必须使用CSS来显示和隐藏元素，以避免重复；
使用ngAnimate时，不要忘记将其注入模块中

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

当您要在重复数据源中添加/删除元素时执行此操作。
Angular将添加和删除类
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>

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

希望它能回答您的问题。
有效地，您必须使用CSS来显示和隐藏元素，以防重复；当您使用ngAnimate时，不要忘记将其插入模块。
您使用的angular和angular animate的版本是什么？bower安装的最新版本，但我可以安装任何其他版本，如果这是重要的angular的版本是
1.3.8
。我还在使用版本为
1.0.5
的
ngFx
。Angular animate的版本与Angular的版本相同，如果我理解正确。Angular 1.3有$animate服务，你可以在动画完成时注册promise回调OK，但我如何在开始时触发它？如果我把它放在指令中，我必须创建一个作用域变量来触发它，对吗？这就是问题所在。如果我打算使用CSS选择器，那么我可以继续使用jQuery。如果我误解了什么，请提供一个例子。好吧，这很好，但是如果使用类似这样的方式切换页面是不起作用的：
，即当
页面
被更改时，它们将从dom中删除。我在另一个地方使用这种方法，但仍然被迫使用jQuery，而不是你必须使用的.col-item.ng-enter-active和.col-item.ng-left-active-谷歌动画中有很多例子可以重复使用。谢谢你，你帮了我很大的忙！我想如果ng repeat中有不止一个元素，那么就没有办法让它工作，对吗？我的意思是，如果我们使用
position:absolute
我们不能将几个元素放在一起，而不指定它们的确切位置。哦，好吧。当我们有类似页面的转换时，我们只在相对容器中使用绝对位置设置。当ng中显示多个元素时，重复这些元素的位置：相对的，甚至是浮动的
.module('myModule', [  '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>

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