ng-animation: change animation based on variable

[alexhocksween]

When using ng-animate with ng-view, I want to use a function to change the animation.

For example:
Page

<div data-ng-view class="animate-container" ng-animate="animationSelect()"></div>

Controller

$scope.forward = true;   
$scope.forwardAnimate = {enter: 'left-enter', leave: 'left-leave'}
$scope.backwardAnimate = {enter: 'right-enter', leave: 'right-leave'}
$scope.animationSelect = function() {
  return $scope.forward ?  $scope.forwardAnimate : $scope.backwardAnimate
}

If forward is true it animates one way, if it is false it animates a different way.

This approach doesn't seem to work. It appears that the animationSelect function is called only when the element is initially loaded. This is because the className is set at the start of the animateActionFactory function and then not updated on subsequent uses of the animation.

      function animateActionFactory(type, beforeFn, afterFn) {
        var ngAnimateValue = ngAnimateAttr && scope.$eval(ngAnimateAttr);
        var className = ngAnimateAttr
            ? isObject(ngAnimateValue) ? ngAnimateValue[type] : ngAnimateValue + '-' + type
            : '';

Further down a function is returned:

          return function(element, parent, after) {
            if (!$sniffer.supportsTransitions && !polyfillSetup && !polyfillStart) {
              beforeFn(element, parent, after);
              afterFn(element, parent, after);
              return;
            }

            element.addClass(setupClass);

I am not sure if what I am trying to do is intended (or desired) functionality for angular's animation library. If it is, then moving the setting of the className into the function returned by animateActionFactory should solve the problem.

[nek4life]

There definitely needs to be a solution for changing the direction for direction based animations, such as animating moving left to right in an application or top to bottom. This seems like one possible solution that is pretty straight forward to use.

[lockenj]

I am new to Angular but I think I have a non-trivial example of how to workaround this missing feature. See my plunk. Let me know what you think.

[rkistner]

It worked well in 1.1.5 with ng-animate="myAnimation()", as the plunk by @lockenj shows. However, in 1.2.0-rc1, I can't get it to work with ng-class="myAnimation()". The issue seems to be that ng-class also tries to animate the class (add and remove animations), and this interferes with the actual animations I want.

[kevin-smets]

All ng-class does, is add / remove the defined class. If you need more control, you'll have to revert to the javascript triggers for animations I think.

I was just getting used to 1.1.5 animations, still need to get the hang of the new format..

[lockenj]

@rkistner do you have a plunk that demonstrates this? I will be migrating to 1.2 very soon and would love to see what you have come up with so far. Also have you seen this http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html.

[rkistner]

@lockenj Thanks for that link - very useful. It has a section on this issue:

Before, in AngularJS 1.1.5, animation could be easily enabled and disabled by changing the scope value which the ng-animate attribute paid attention to. Now, since this has been removed, just use ngClass instead. Since ngClass listens on the scope, then when you change a value, the classes on the element are changed and therefore the CSS classes are different and therefore different animations are picked up when the next animation is triggered. This also means that when you remove the animation-aware CSS classes then it will disable the animation.

Unfortunately, it doesn't work so well for me. I've created a plunk here to shows my issue. When using class="fade", the enter and leave animations work exactly like I want it. However, when using ng-class="{fade: true}" or class="{{'fade'}}", the enter animation is never performed. Note that the class never even changes in this case, but just assigning it "dynamically" causes the enter animation to stop working.

[rkistner]

Ok, my issue is a duplicate of #3727. Will check if dynamically changing it is possible after that fix.

[rkistner]

Ok, dynamically changing the animation seems to work (see plunk) when using the fixed version. I hope the fix makes it into the next release.

[matsko]

Once this PR is in then the ngClass bugs are fixed: #3801

[matsko]

1.2rc2 has the fix. Please reopen if things are still broken.