角度4动态高度动画动画恢复

我正在使用Angular4及其动画。我试图将动态值传递给动画声明，但在动画完成后，它将其转换为原始状态。角度4动态高度动画动画恢复

基本上，我有一个动态高度，然后将触发基于该高度的动画。

我想在没有引导的情况下完成这项工作，或者将css3方法平整化并在角度动画中进行。

下面是动画定义

export const deltaScore = trigger(
    "deltaScore", 
    [ 
    state("void", style({ 
      height: "*" 
     } 
    ) 
    ), 
    state('*', style({ height: "*" })), 
    state('update', style({ height: "{{height}}" })), 
    transition(
     "* => *", 
     [style({height: "*"}), animate('1s ease-in')] 
    ), 
    transition(
     "* <=> update", 
     [style({height: "*"}), animate('1s ease-in')] 
    ) 
    ], { height: 0 } 
);

更新时间：plunk

来源

2017-07-28 Miguel Felipe Guillen Calo

这是一种上下滑动效果，你正在寻找或它是别的东西？ – Vega

就像一个长着和下来的酒吧。也可能重用VU米。 –

而不是使用触发器和状态，你可以使用AnimationBuilder，从而简化了的事情，我认为这是最好安装用于进行这样的情况下，当你不需要状态和触发器时。当然，动画的最终结果会保留下来，直到您决定做另一个动画。

模板：

<div class="progress-wrap"> 
    {{progress}} 
    <div #progressBar class="progress-bar"></div> 
</div>

组件：

import { ElementRef } from '@angular/core'; 
import { AnimationBuilder, animate, style } from '@angular/animations'; 

@Component({ 
    // ... 
}) 
export class MyComponent { 

    @ViewChild('progressBar') progressBar: ElementRef; 
    animationPlayer; 

    constructor(
     private animBuilder: AnimationBuilder 
    ) {} 


    updateProgress(progress = null): void { 
     const progressAnimation = this.animBuilder.build([ 
      animate(`430ms ease-out`, style({ 
       'height': `${!!progress ? progress + '%' : '*'}` 
      })) 
     ]); 
     this.animationPlayer = progressAnimation.create(this.progressBar.nativeElement); 
     this.animationPlayer.onDone((evt) => { 
      console.log('ANIMATION DONE', evt); 
      // there is no notion of 'trigger' or 'state' here, 
      // so the only thing this event gives you is the 'phaseName', 
      // which you already know... 
      // But the done callback is here and you can do whatever you might need to do 
      // for when the animation ends 
     }); 
     this.animationPlayer.play(); 
    } 

}

然后，您可以简单地说：

this.updateProgress(80); // to animate the progress bar to 80% 
this.updateProgress(); // in case you want to animate to an 'auto' height (not that it would be needed on a progress animation, but for other cases)

我做了一些调整，plnkr使用t的动画制作者他的进步和增长：https://plnkr.co/edit/K1r3I8QZOmMIAGEYC2fw?p=preview

当然，你不需要有'animationPlayer'作为你的类的属性......它可以简单地是你的方法的局部变量，但也许你想从另一个方法中访问相同的实例，暂停或手动结束它。

P.S. state()应该肯定能够接受输入参数（并且该功能请求为here），但我认为触发器适用于只有几次转换的情况。无论何时需要触发高度动画，您都不希望随机化触发器值。 AnimationBuilder是您的案例更好的选择。

来源

2017-07-31 12:40:27 MrCroft

我实际上正在研究AnimationBuilder，但由于它的实验性质而犹豫了。 “只要需要为高度触发动画，您就不会随机设置触发值。对于您的情况，AnimationBuilder是更好的选择。” - 更像我们不应该拿出随机或前/后缀状态来触发动画。谢谢你的解决方案。将此标记为答案。 –

角度4动态高度动画动画恢复

回答

相关问题