对儿童的角度4动画：风格向后跳

我想通过动画设置其不透明度来淡化元素的孩子。它工作正常，但在动画结束时，孩子的风格恢复到原始状态（不透明度未设定）。对儿童的角度4动画：风格向后跳

如何防止/如何告诉Angular在动画完成后将样式保留在目标状态？

这里是我的代码：

@Component({ 
    selector: 'app-playground', 
    template: ` 
    <div [@simpleStateTransition]="simpleState"> 
    {{ simpleState }} 
    <div class="fadeout">fade this child out!</div> 
    </div> 

    <button (click)="toggleSimpleState()">toggle simple state</button> 
    `, 
    animations: [ 
    trigger('simpleStateTransition', [ 
     transition('initial => extended', group([ 
     query('.fadeout', animate('300ms', style({'opacity': '0'}))) 
     ])), 
    ]) 
    ] 
}) 
export class PlaygroundComponent { 

    simpleState = 'initial' 

    constructor() { } 

    toggleSimpleState() { 
    this.simpleState = this.simpleState === 'initial' ? 'extended' : 'initial' 
    } 
}

来源

2017-10-20 Hoff

我对动画没有太多的想法，但你可以尝试ngAfterViewInit，因为这是视图渲染complated时的圣人。只是一个想法 –

我找到了一个解决方案，它实际上是比我想象的要容易得多。我们不需要进入'查询儿童并开始动画'业务。

只需创建2个独立的动画，并从相同的表达式中触发它们。拥有单独的触发器允许我们定义在动画完成后保持的开始和结束样式。

下面是一些示例代码：

@Component({ 
    selector: 'app-component', 
    templateUrl: './your.component.html', 
    animations: [ 
    trigger('parentAnimation', [ 
     state('expanded', style(styles.backgroundExtended)), 
     state('compact', style(styles.backgroundCompact)), 
     transition('expanded <=> compact', animate(timings.background)) 
    ]), 
    trigger('childAnimation', [ 
     state('expanded', style(styles.hideExtended)), 
     state('compact', style(styles.hideCompact)), 
     transition('expanded <=> compact', animate(timings.background)) 
    ]) 
    ] 
}) 

<div [@parentAnimation]="visualState"> 
    <h1>Hello from parent</h1> 
    <div [@childAnimation]="visulaState"> 
     A Child! 
    </div> 
    <div [@childAnimation]="visulaState"> 
     Another Child! 
    </div> 
</div>

对我来说这是非常不错/清洁/更容易的解决方案。如果您发现任何缺陷，请留下评论。

来源

2017-10-22 14:38:19 Hoff

对儿童的角度4动画：风格向后跳

回答

相关问题