From/To Keyframes animations break theirself and the router

[ghost]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Angular fails to execute Web Animations API if you use from/to keyframes. I've found something here, but I don't know how I could make use of what is written there. Furthermore, the router will fail too after the manifestation of the bug.

In Firefox the console says :

EXCEPTION: Animation to or from an underlying value is not yet supported.

But in Chrome:

EXCEPTION: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.

Expected behavior

Smooth transition between two declared states.

Minimal reproduction of the problem with instructions

// [...]
@Component({
    // [...]
	animations: [
		trigger('ae', [
			state('resellers', style({
				transform: 'translateY(0)'
			})),
			transition('* => resellers', [
				animate('300ms ease-in', keyframes([
					style({transform: 'translateY(-100%)', offset: 0}),
					style({transform: 'transateY(0)', offset: 1})
				])),
			]),
			transition('resellers => *', [
				animate('300ms ease-out', keyframes([
					style({transform: 'transateY(0)', offset: 0}),
					style({transform: 'translateY(-100%)', offset: 1})
				])),
			])
		])
	]
})
// [...]

What is the motivation / use case for changing the behavior?

From/to keyframes in animations.

Please tell us about your environment:

• Angular version: 2.1.X

• Browser: [Chrome 56.0.2924.87 (64 bit) | Firefox 51.0.1 (32 bit)]

• Language: [TypeScript]

• Node (for AoT issues): node --version = 6.9.4

[jinder]

Same as #14752 ?

[DzmitryShylovich]

@jinder this is #14752

[jinder]

@DzmitryShylovich haha, yes, you're right. I meant #14007...

[ghost]

Well it could be possible that they share the same bug (or the same fault that we're not coding as it was intended, I don't know).

[evanjmg]

A Bottom bar in the same view as md-tabs but not inside it. I get the exception -

 animations: [
    trigger('flyInOut', [
      state('in', style({transform: 'translateY(0)'})),
      transition('void => *', [
        style({transform: 'translateY(100%)'}),
        animate(300)
      ]),
      transition('* => void', [
        animate(300, style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]

[chris13524]

I get this issue as well when changing the trigger before the animation completes:

animations: [
  trigger('selected', [
    state('no', style({
      padding: 0,
    })),
    state('yes', style({
      padding: "0.5rem",
    })),
    transition('no => yes', animate('200ms ease-in')),
    transition('yes => no', animate('200ms ease-out')),
  ]),
],

[kukjevov]

I get this error also but in different situation.

this one is working

trigger("test",
[
    transition("* => *",
    [
        style({'background-color': "#FFFFFF"}),
        animate(500, style({'background-color': "#00FFFF"}))
    ])
])

and this one is not, only difference is that i dont set default background-color and since div element does not have default background-color it fails somehow.

trigger("test",
[
    transition("* => *",
    [
        animate(500, style({'background-color': "#00FFFF"}))
    ])
])

[kukjevov]

Hi all.

This looks like a bigger problem.

Look at this https://plnkr.co/edit/JdctUV6hVfcOhdCbCyMk?p=preview it is quite simple.

It demonstrates code that is above. First version is working, second version is not.

Here is also demonstration of this problem. https://github.com/kukjevov/ng-universal-demo/tree/animation-error

Yesterday i was trying new animation features at home and everything was working nicely. I pushed all changes and try them at work and i got error mentioned in this bug. I have 4 web browsers at work i tried FF 55 beta, Chrome 59, Edge 14 none of them worked. Also tried FF 54 and it worked. Today i came home and code which worked yesterday does not work anymore. Not even that plunker that i have provided.

Well this looks like some changes in browsers. Weird thing is that it behaves randomly.

So far i found out that this is connected with auto styles '*'. If you dont specify explicitly style value it will fail with mentioned error.

Can you please look at this @matsko, @IgorMinar because it looks like that it completely breaks animations.

Thank you

[kukjevov]

Is there list of css properties that cant be used for auto property computation? It looks like that problem is background-color. Well another question is why it is sometimes working and in some browsers and sometimes not.

[kukjevov]

Another interesting observation. When i enabled dom.animations-api.core.enabled setting using Firefox about:config these animations are working.

[tommueller]

Strange thing for me is, that the error does not occur in dev-environment. Also the styles work correctly in dev-env. After building the app, the error occurs and things are not correctly rendered because of it ...

This is the set of animations I use:

animations: [
    trigger('slideIn', [
      state('void', style({
        height: '0',
        padding: '0'
      })),
      state('*', style({
        height: '*',
        padding: '8px 0'
      })),
      transition('void => *', [
        animate('.3s ease-in')
      ])
    ]),
    trigger('slideOut', [
      state('void', style({
        height: '0',
        padding: '0'
      })),
      state('LOADING', style({
        height: '*',
        padding: '8px 0'
      })),
      state('*', style({
        height: '*',
        padding: '8px 0'
      })),
      transition('LOADING => void', [
        animate(0)
      ]),
      transition('* => void', [
        animate('0.3s ease-out')
      ])
    ]),
    trigger('fadeIn', [
      state('void, false', style({
        opacity: 0
      })),
      state('*', style({
        opacity: 1
      })),
      transition(':enter', [
        animate('.3s ease-in')
      ])]
    ),
    trigger('fadeOut', [
      state('void, false', style({
        opacity: 1
      })),
      state('*', style({
        opacity: 0
      })),
      transition('* => void', [
        animate('.3s ease-out')
      ])
    ])
  ]

[tommueller]

Apparently this is supposed to be fixed in web-animation-js 4.3.1 (web-animations/web-animations-js#146) but I still get this error in Angular.

Any idea why the animation above throws this error in FF still?

[matsko]

Hey everyone. Sorry it took me so long to get to this issue.

I'm having a hard time understanding what exactly is breaking here? If a CSS style is not included before its used then Angular should automatically fill it in (so if you miss backgroundColor then it will set backgroundColor: '*' in the step before).

With 4.x, there were some issues with this, but they did get fixed. @kukjevov @tommueller if this is still problematic then please let me know.

[tommueller]

@matsko I just tested this again using angular 4 and the new firefox quantum and the problem seems to be gone! thanks for the reminder, still had the buggy parts (padding) commented!

[jtomaszewski]

If somebody wants to fix it but doesn't want to upgrade his angular version yet, here's a workaround:

import {
  AnimationDriver,
  ɵNoopAnimationDriver as NoopAnimationDriver,
  ɵsupportsWebAnimations as supportsWebAnimations,
  ɵWebAnimationsDriver as WebAnimationsDriver
} from '@angular/animations/browser';

export function animationDriverFactory(platform) {
  if (platform.CHROME && supportsWebAnimations()) {
    return new WebAnimationsDriver();
  }
  return new NoopAnimationDriver();
}

const PROVIDERS = [
  { provide: AnimationDriver, useFactory: animationDriverFactory, deps: [RtPlatform] }
];

[vicb]

Closing as obsolete

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}