Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(animations): ensure `position` and `display` styles are handled outside of keyframes/web-animations #28911

Closed
wants to merge 2 commits into from
Closed
Changes from 1 commit
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.
+21 −11
Diff settings

Always

Just for now

Prev

fixup! fix(animations): ensure `position` and `display` styles are ha…

…ndled outside of keyframes/web-animations
  • Loading branch information...
matsko committed Feb 26, 2019
commit 2b2ac506a5b72b3eddfd3ad0ad2b78affb610f13
@@ -10,7 +10,7 @@ import {AnimationPlayer, ɵStyleData} from '@angular/animations';
import {allowPreviousPlayerStylesMerge, balancePreviousStylesIntoKeyframes, computeStyle} from '../../util';
import {AnimationDriver} from '../animation_driver';
import {containsElement, hypenatePropsObject, invokeQuery, matchesElement, validateStyleProperty} from '../shared';
import {packageSpecialStyles} from '../special_cased_styles';
import {packageNonAnimatableStyles} from '../special_cased_styles';

import {CssKeyframesPlayer} from './css_keyframes_player';
import {DirectStylePlayer} from './direct_style_player';
@@ -106,7 +106,7 @@ export class CssKeyframesDriver implements AnimationDriver {
const kfElm = this.buildKeyframeElement(element, animationName, keyframes);
document.querySelector('head') !.appendChild(kfElm);

const specialStyles = packageSpecialStyles(element, keyframes);
const specialStyles = packageNonAnimatableStyles(element, keyframes);
const player = new CssKeyframesPlayer(
element, keyframes, animationName, duration, delay, easing, finalStyles, specialStyles);

@@ -18,17 +18,17 @@ import {eraseStyles, setStyles} from '../util';
*
* @returns an instance of `SpecialCasedStyles` if any special styles are detected otherwise `null`

This comment has been minimized.

Copy link
@mhevery

mhevery Feb 23, 2019

Member

Thanks for the docs.

*/
export function packageSpecialStyles(
export function packageNonAnimatableStyles(
element: any, styles: {[key: string]: any} | {[key: string]: any}[]): SpecialCasedStyles|null {
let startStyles: {[key: string]: any}|null = null;
let endStyles: {[key: string]: any}|null = null;
if (Array.isArray(styles) && styles.length) {
startStyles = filterSpecialStyles(styles[0]);
startStyles = filterNonAnimatableStyles(styles[0]);
if (styles.length > 1) {
endStyles = filterSpecialStyles(styles[styles.length - 1]);
endStyles = filterNonAnimatableStyles(styles[styles.length - 1]);
}
} else if (styles) {
startStyles = filterSpecialStyles(styles);
startStyles = filterNonAnimatableStyles(styles);
}

return (startStyles || endStyles) ? new SpecialCasedStyles(element, startStyles, endStyles) :
@@ -98,26 +98,36 @@ export class SpecialCasedStyles {
}
}

/**
* An enum of states reflective of what the status of `SpecialCasedStyles` is.
*
* Depending on how `SpecialCasedStyles` is interacted with, the start and end
* styles may not be applied in the same way. This enum ensures that if and when
* the ending styles are applied then the starting styles are applied. It is
* also used to reflect what the current status of the special cased styles are
* which helps prevent the starting/ending styles not be applied twice. It is
* also used to cleanup the styles once `SpecialCasedStyles` is destroyed.
*/
const enum SpecialCasedStylesState {

This comment has been minimized.

Copy link
@mhevery

mhevery Feb 23, 2019

Member

this could use some docs.

Pending = 0,
Started = 1,
Finished = 2,
Destroyed = 3,
}

function filterSpecialStyles(styles: {[key: string]: any}) {
function filterNonAnimatableStyles(styles: {[key: string]: any}) {
let result: {[key: string]: any}|null = null;
const props = Object.keys(styles);
for (let i = 0; i < props.length; i++) {
const prop = props[i];
if (isSpecialStyle(prop)) {
if (isNonAnimatableStyle(prop)) {
result = result || {};
result[prop] = styles[prop];
}
}
return result;
}

function isSpecialStyle(prop: string) {
function isNonAnimatableStyle(prop: string) {
return prop === 'display' || prop === 'position';
}
@@ -11,7 +11,7 @@ import {allowPreviousPlayerStylesMerge, balancePreviousStylesIntoKeyframes, copy
import {AnimationDriver} from '../animation_driver';
import {CssKeyframesDriver} from '../css_keyframes/css_keyframes_driver';
import {containsElement, invokeQuery, isBrowser, matchesElement, validateStyleProperty} from '../shared';
import {packageSpecialStyles} from '../special_cased_styles';
import {packageNonAnimatableStyles} from '../special_cased_styles';

import {WebAnimationsPlayer} from './web_animations_player';

@@ -67,7 +67,7 @@ export class WebAnimationsDriver implements AnimationDriver {

keyframes = keyframes.map(styles => copyStyles(styles, false));
keyframes = balancePreviousStylesIntoKeyframes(element, keyframes, previousStyles);
const specialStyles = packageSpecialStyles(element, keyframes);
const specialStyles = packageNonAnimatableStyles(element, keyframes);
return new WebAnimationsPlayer(element, keyframes, playerOptions, specialStyles);
}
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.