$animate.animated conflicts with $animateProvider.classNameFilter

[viros]

bug

I'm trying to disable ngAnimate by default and enable only for elements that have class ng-animate-enabled.
$animateProvider.classNameFilter(/ng-animate-enabled/);

But when i call $animate.enabled([some element]) it returns true. It looks like $animate.enabled ignores classNameFilter.

[gkalpak]

When used as a getter, $animate.enabled() returns whether or not animations have been disabled on the specific element and via $animate.enabled(). It is not a "general utility" method for checking if animations will be performed on the element, as it doesn't check for enabled/disabled animations via other means (e.g. $animateProvider.classNameFilter(), animations disabled globally, animations disabled on a parent element etc).

So, this works as expected, but we could improve the docs to better explain that.
(PRs welcome 😃)

[viros]

I understand your point but i need to check is animation disabled for some element and i don't care how it was done $animateProvider.classNameFilter() or $animate.enabled().

It's strange to have a method that check the 'state' of something but only if this state was reached only by specific method. Do you really think it is normal, me not.

Our problem that we use classNameFilter to disable animation in our application. We also use third party component ui-select. They have different logic based on animation enabled/disabled and they check it by $animate.enabled(). $animate.enabled() returns 'true' and they subscribe to 'enter' event but this event will never fired because in reality animation is disabled.

[gkalpak]

I wonder why they need different logic. Could you point to the actual code ?

@matsko, @Narretz: Do you think there should be a way to determine if animations are enabled/disabled for a specific element via any means (e.g. classNameFilter, animate.$enable() globally/on parent/on self, etc) ? It sounds reasonable (but could be expensive or there might be limitation/complications that I'm missing).

[viros]

This is ui-select 0.16.0:

var container = $element.querySelectorAll('.ui-select-choices-content');
if (ctrl.$animate && ctrl.$animate.on && ctrl.$animate.enabled(container[0])) {
  ctrl.$animate.on('enter', container[0], function (elem, phase) {
    if (phase === 'close') {
      // Only focus input after the animation has finished
      $timeout(function () {
        ctrl.focusSearchInput(initSearchValue);
      });
    }
  });
}

It's trying to set focus after animation finished but 'enter' event will never fired. I've fixed this by creating my own directive but how many other components/developers can fall into same trap.

By the way you already check if animation enabled/disabled globally in enabled method: // () - Global getter bool = !!animationsEnabled;
and
// (bool) - Global setter bool = animationsEnabled = !!element;

[gkalpak]

By the way you already check if animation enabled/disabled globally in enabled method

It is possible to use the same method to check for globally enabled/disabled animations, but when calling it for a specific element, it doesn't check the global state (iirc).

The ui-select implementation seems more like a hack/work-around. The "logic" behind the current implementation of $animate is that people shouldn't care if they are active or not, they should give animate methods (e.g. $animate.enter/leave/addClass/removeClass etc) and if they are disabled (or even if ngAnimate is not present), no animation will take place (just the underlying DOM operations).

If we are breaking this "contract" somewhere, I believe we should fix it.

[viros]

I totally agree with you, and i created an issue for ui-select and fixed the problem myself in our project by custom directive.
I was just confused that $animate.enabled() doesn't show the real picture.