honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

revert: fix(animations): blend in all previously transitioned styles into next animation if interrupted 

This reverts commit ef96763fa4.
This commit is contained in:
Matias Niemelä 2016-11-28 13:23:52 -08:00
parent 555301ce3a
commit be3784c957
3 changed files with 20 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/@angular/platform-browser/src/dom/web_animations_driver.ts
View File

@ -20,8 +20,10 @@ export class WebAnimationsDriver implements AnimationDriver {
previousPlayers: AnimationPlayer[] = []): WebAnimationsPlayer {
let formattedSteps: {[key: string]: string | number}[] = [];
let startingStyleLookup: {[key: string]: string | number} = {};
if (isPresent(startingStyles)) {
if (isPresent(startingStyles) && startingStyles.styles.length > 0) {
startingStyleLookup = _populateStyles(startingStyles, {});
startingStyleLookup['offset'] = 0;
formattedSteps.push(startingStyleLookup);
}
keyframes.forEach((keyframe: AnimationKeyframe) => {

29
modules/@angular/platform-browser/src/dom/web_animations_player.ts
View File

@ -69,21 +69,12 @@ export class WebAnimationsPlayer implements AnimationPlayer {
const previousStyleProps = Object.keys(this.previousStyles);
if (previousStyleProps.length) {
let startingKeyframe = keyframes[0];
let missingStyleProps: string[] = [];
let startingKeyframe = findStartingKeyframe(keyframes);
previousStyleProps.forEach(prop => {
if (!isPresent(startingKeyframe[prop])) {
missingStyleProps.push(prop);
if (isPresent(startingKeyframe[prop])) {
startingKeyframe[prop] = this.previousStyles[prop];
}
startingKeyframe[prop] = this.previousStyles[prop];
});
if (missingStyleProps.length) {
for (let i = 1; i < keyframes.length; i++) {
let kf = keyframes[i];
missingStyleProps.forEach(prop => { kf[prop] = _computeStyle(this.element, prop); });
}
}
}
this._player = this._triggerWebAnimation(this.element, keyframes, this.options);
@ -185,3 +176,17 @@ function _copyKeyframeStyles(styles: {[style: string]: string | number}):
});
return newStyles;
}
function findStartingKeyframe(keyframes: {[prop: string]: string | number}[]):
{[prop: string]: string | number} {
let startingKeyframe = keyframes[0];
// it's important that we find the LAST keyframe
// to ensure that style overidding is final.
for (let i = 1; i < keyframes.length; i++) {
const kf = keyframes[i];
const offset = kf['offset'];
if (offset !== 0) break;
startingKeyframe = kf;
}
return startingKeyframe;
}

26
modules/@angular/platform-browser/test/dom/web_animations_player_spec.ts
View File

@ -202,32 +202,6 @@ export function main() {
]);
});
it('should allow previous styles to be merged into the starting keyframe of the animation that were not apart of the animation to begin with',
() => {
if (!getDOM().supportsWebAnimation()) return;
const elm = el('<div></div>');
document.body.appendChild(elm);
elm.style.color = 'rgb(0,0,0)';
const previousStyles = {color: 'red'};
const previousPlayer =
new ExtendedWebAnimationsPlayer(elm, [previousStyles, previousStyles], {}, []);
previousPlayer.play();
previousPlayer.finish();
const player = new ExtendedWebAnimationsPlayer(
elm, [{opacity: '0'}, {opacity: '1'}], {duration: 1000}, [previousPlayer]);
player.init();
const data = player.domPlayer.captures['trigger'][0];
expect(data['keyframes']).toEqual([
{opacity: '0', color: 'red'},
{opacity: '1', color: 'rgb(0, 0, 0)'},
]);
});
it('should properly calculate the previous styles for the player even when its currently playing',
() => {
if (!getDOM().supportsWebAnimation()) return;