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

fix(animations): ensure animations are disabled on the element containing the @.disabled flag (#18714) 

Prior to fix this fix, @.disabled would only work to disable child
animations. Now it will also disable animations for the element that has
the @.disabled flag (which makes more sense).

PR Close #18714
This commit is contained in:
Matias Niemelä 2017-08-15 13:43:14 -07:00 committed by Miško Hevery
parent 2159342038
commit 791c7efe29
3 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/animations/browser/src/render/transition_animation_engine.ts
View File

@ -817,6 +817,7 @@ export class TransitionAnimationEngine {
const disabledElementsSet = new Set<any>(); const disabledElementsSet = new Set<any>();
this.disabledNodes.forEach(node => { this.disabledNodes.forEach(node => {
disabledElementsSet.add(node);
const nodesThatAreDisabled = this.driver.query(node, QUEUED_SELECTOR, true); const nodesThatAreDisabled = this.driver.query(node, QUEUED_SELECTOR, true);
for (let i = 0; i < nodesThatAreDisabled.length; i++) { for (let i = 0; i < nodesThatAreDisabled.length; i++) {
disabledElementsSet.add(nodesThatAreDisabled[i]); disabledElementsSet.add(nodesThatAreDisabled[i]);

11
packages/animations/src/animation_metadata.ts
View File

@ -282,11 +282,12 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
* <div [@myAnimationTrigger]="myStatusExp">...</div> * <div [@myAnimationTrigger]="myStatusExp">...</div>
* ``` * ```
* *
* ## Disable Child Animations * ## Disable Animations
* A special animation control binding called `@.disabled` can be placed on an element which will * A special animation control binding called `@.disabled` can be placed on an element which will
then disable animations for any inner animation triggers situated within the element. then disable animations for any inner animation triggers situated within the element as well as
any animations on the element itself.
* *
* When true, the `@.disabled` binding will prevent inner animations from rendering. The example * When true, the `@.disabled` binding will prevent all animations from rendering. The example
below shows how to use this feature: below shows how to use this feature:
* *
* ```ts * ```ts
@ -312,8 +313,8 @@ export interface AnimationStaggerMetadata extends AnimationMetadata {
* The `@childAnimation` trigger will not animate because `@.disabled` prevents it from happening * The `@childAnimation` trigger will not animate because `@.disabled` prevents it from happening
(when true). (when true).
* *
* Note that `@.disbled` will only disable inner animations (any animations running on the same * Note that `@.disbled` will only disable all animations (this means any animations running on
element will not be disabled). * the same element will also be disabled).
* *
* ### Disabling Animations Application-wide * ### Disabling Animations Application-wide
* When an area of the template is set to have animations disabled, **all** inner components will * When an area of the template is set to have animations disabled, **all** inner components will

5
packages/core/test/animation/animation_integration_spec.ts
View File

@ -2441,7 +2441,7 @@ export function main() {
expect(players[0].totalTime).toEqual(1234); expect(players[0].totalTime).toEqual(1234);
}); });
it('should not disable animations for the element that they are disabled on', () => { it('should disable animations for the element that they are disabled on', () => {
@Component({ @Component({
selector: 'if-cmp', selector: 'if-cmp',
template: ` template: `
@ -2476,8 +2476,7 @@ export function main() {
fixture.detectChanges(); fixture.detectChanges();
let players = getLog(); let players = getLog();
expect(players.length).toEqual(1); expect(players.length).toEqual(0);
expect(players[0].totalTime).toEqual(1234);
resetLog(); resetLog();
cmp.disableExp = false; cmp.disableExp = false;