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来实现.我知道在angular中触发特定元素动画的唯一方法是创建一个指令,将一个范围变量传递给指令,在指令中为该变量创建观察者,然后从控制器更改变量:

<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位置:绝对并且位于具有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;
}

http://jsfiddle.net/ncrs4gz0/

编辑: 如果您使用ng-repeat而非ng-show中的过滤器来显示这样的选定页面

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

然后从dom和angular add类添加和删除页面ng-enter,ng-enter-active和ng-leave ng-leave-active

但动画可以定义类似看小提琴:http://jsfiddle.net/o944epzy/