Animating auto height throws a "Partial keyframes not supported" exception when the animated element is in a hidden tab

[jawadst]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When animating height from * (auto) to 0 on an element inside a tab that is not the current tab (ie hidden), the height of the element should be set to 0

What is the current behavior?

Throws a "Partial keyframes not supported" exception:
ERROR DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported. at WebAnimationsPlayer._triggerWebAnimation (https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js:2319:35) at WebAnimationsPlayer.init (https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js:2302:29) at InjectableAnimationEngine.DomAnimationEngine._queuePlayer (https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js:1593:16) at InjectableAnimationEngine.DomAnimationEngine.animateTransition (https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js:1508:14) at InjectableAnimationEngine.DomAnimationEngine.setProperty (https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js:1379:18) at AnimationRenderer.setProperty (https://unpkg.com/@angular/platform-browser/bundles/platform-browser-animations.umd.js:234:26) at DebugRenderer2.setProperty (https://unpkg.com/@angular/core/bundles/core.umd.js:13269:23) at setElementProperty (https://unpkg.com/@angular/core/bundles/core.umd.js:9544:19) at checkAndUpdateElementValue (https://unpkg.com/@angular/core/bundles/core.umd.js:9463:13) at checkAndUpdateElementInline (https://unpkg.com/@angular/core/bundles/core.umd.js:9397:24) at checkAndUpdateNodeInline (https://unpkg.com/@angular/core/bundles/core.umd.js:12090:23) at checkAndUpdateNode (https://unpkg.com/@angular/core/bundles/core.umd.js:12065:16) at debugCheckAndUpdateNode (https://unpkg.com/@angular/core/bundles/core.umd.js:12694:59) at debugCheckRenderNodeFn (https://unpkg.com/@angular/core/bundles/core.umd.js:12673:13) at Object.eval [as updateRenderer] (ng:///PlunkerAppModule/AppComponent.ngfactory.js:186:5)

The keyframes obtained for the animation:
[{ "height": "", "display": "", "overflow": "hidden", "easing": "ease-in", "offset": 0 }, { "height": "0", "display": "", "overflow": "hidden", "offset": 1 }]

The height of the first keyframe is empty whereas it should be the actual height of the element as it's the start of the transition visible => hidden. Using a fixed height instead of * works fine.

What are the steps to reproduce?

Plunkr: http://plnkr.co/edit/DV5ciU9QbAQkH6wM5to0?p=preview

Which versions of Angular, Material, OS, browsers are affected?

Chrome (works fine on Firefox)
Angular > 4
Material 2 beta 3

Is there anything else we should know?

It only happens when the animation is fired in an async fashion (with a setTimeout, a Promise/Observable, etc.).

[M-Adoo]

same problem with me.

[wpcfan]

yep, md-select in a hidden tab also throws this exception

[macjohnny]

FYI this problem is solved with angular 4.2.0-rc.2, see http://embed.plnkr.co/qOuzoM/

[aleixsuau]

@macjohnny solution worked in my case. Thanks!

[stephengeorgewest]

I just started putting in datepickers and dialogs. I started the transition in beta.8 and angular 4.1.3. But going to the latests beta.10 forced me to update to 4.3.0. Could this have been un-fixed, or a different cause? I wasn't seeing this in the beta.8, 4.1.3 combination.

[stephengeorgewest]

I could just be doing it wrong. I'm only using animations in 2 places.

animations: [
	trigger('growShrinkStaticStart', [
		state('in', style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' })),
		transition('* => void', [
			style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' }),
			animate("0.5s ease", style({ height: '0', 'padding-top': '0', 'padding-bottom': '0', 'margin-top': '0', 'margin-bottom': '0' }))
		]),
		transition('void => false', [
			/*no transition on first load*/
		]),
		transition('void => *', [
			style({ height: '0', 'padding-top': '0', 'padding-bottom': '0', 'margin-top': '0', 'margin-bottom': '0' }),
			animate("0.5s ease", style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' }))
		])
	]),
	trigger('growShrink', [
		state('in', style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' })),
		transition('* => void', [
			style(                   { height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' }),
			animate("0.5s ease", style({ height: '0', 'padding-top': '0', 'padding-bottom': '0', 'margin-top': '0', 'margin-bottom': '0' }))
		]),
		transition('void => *', [
			style(                   { height: '0', 'padding-top': '0', 'padding-bottom': '0', 'margin-top': '0', 'margin-bottom': '0' }),
			animate("0.5s ease", style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' }))
		])
	]),
	trigger('shrink', [
		state('*', style({ width: '*', padding: '*', margin: '*' })),
		transition('* => void', [
			style({
				width: '0px',/* height: '*',*/
				'padding-left': '0', 'padding-right':  '0', 'padding-top': '*', 'padding-bottom': '*',
				'margin-left':  '0px !important', 'margin-right !important': '0px', 'margin-top':  '*', 'margin-bottom':  '*',
				'overflow': 'hidden', 'white-space': 'pre'
			}),
			/*animate("0.5s ease", style({
				width: '0', /height: '*',/
				'padding-left': '0', 'padding-right': '0', 'padding-top': '0', 'padding-bottom': '0',
				'margin-left':  '0px !important', 'margin-right':  '0px !important', 'margin-top':  '*', 'margin-bottom':  '*',
				'overflow': 'hidden', 'white-space': 'pre'
			}))*/
		])/*,
		transition('void => *', [
			style(                   { width:  '0px', padding: '0', margin: '0', 'overflow': 'hidden', 'white-space': 'pre' }),
			animate("2s ease", style({ width: '10px', padding: '*', margin: '*', 'overflow': 'hidden', 'white-space': 'pre' }))
		])*/
	])
]

2:

animations: [
	trigger('growShrink', [
		state('in', style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' })),
		transition('* => void', [
			style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' }),
			animate("0.5s ease", style({ height: '0', 'padding-top': '0', 'padding-bottom': '0', 'margin-top': '0', 'margin-bottom': '0' }))
		]),
		transition('void => *', [
			style({ height: '0', 'padding-top': '0', 'padding-bottom': '0', 'margin-top': '0', 'margin-bottom': '0' }),
			animate("0.5s ease", style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', 'margin-top': '*', 'margin-bottom': '*' }))
		])
	])
],

[summerchill]

I have the same error message

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

with

        "@angular/animations": "4.1.3",
        "@angular/cdk": "^2.0.0-beta.8",
        "@angular/common": "4.1.0",
        "@angular/compiler": "4.1.0",
        "@angular/compiler-cli": "4.1.0",

Any advice appreciated

[andrewseguin]

Let's track this in #4271 - if you can reproduce please let me know and we can look into it. I believe core has fixed the underlying animations issue

[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.}