Disable animations

[Daniel]

This is not an issue, just a question.

I've got this option in my app:

Is there any option to disable animations? The only thing I found is this way: this.animator.setDuration(0);
but I'm already changing duration in some places so I'd have to double check this parameter many times.

How can I archive this?

[Fabian Leutgeb]

There is currently no way to disable animations with this package. Setting the animation duration to zero still performs a number of things and I wouldn't recommend to use it as a workaround and you should probably take care of this on your own. However, I'm considering to add this feature in a future release.

[Daniel]

Great!
Let me know when then

[Fabian Leutgeb]

As of v2.3.0-beta.2 there are options to disable animations globally or per instance (see css-animator/tree/next#disabled-default-false).

import { AnimationBuilder } from 'css-animation/builder';

// disable animations for a given instance
let builder = new AnimationBuilder();
builder.disabled = true;

// disable animations globally
AnimationBuilder.disabled = true;

You can install the latest beta from css-animator@next.

[Daniel]

Perfect, works like a charm!

[Fabian Leutgeb]

This feature is now published as of v2.3.0 at css-animator@latest.

[Daniel]

With hidden elements using .show instead .animate the element pops up with some delay. Would be possible to display them as soon the page loads?
Might be a bit tricky as long as we are using hidden, which is an Angular property right?

[Fabian Leutgeb]

I will have a look asap. hidden actually is a native HTML attribute. If you can track down what's causing the delay in the meantime, a PR is also very welcome.

[Daniel]

That's what I mean... I think is not gonna be possible to fix this flicker if we use hidden.
When the page finishes loading there is some time till our code gets triggered. Let's say that we have a quite of few images to display and we want to animate the first one. This would be the best example.

I think there is no way to fix this unless we use a specific attribute for our tags.

But tbh this is not critical at all. We have to understand that this is a specific mode to make old phones faster. I rather prefer this flicker than no option to disable animations

[Fabian Leutgeb]

When does this flicker occur? Do you mean that the element is visible on page load even though it should be hidden (i.e., has the hidden attribute)? In this case, try adding the following to your CSS rules if you haven't already:

[hidden] {
  display: none;
}

[Daniel]

No, the element is hidden because we're using a native attribute. Once our code gets triggered with .show() we displayed it without animation (because it's disabled).
So since it's loading till we animate it takes some milliseconds

[Fabian Leutgeb]

Right, the element will remain hidden until .show() is triggered, which is the expected behavior, since disabling animations shouldn't change the point in time where e.g., an element's visibility is modified.