动画后，Angular 4动态高度动画将还原 [英] Angular 4 Dynamic Height Animation Reverts After Animation
问题描述
我正在使用Angular4及其动画。
我正在尝试将动态值传递给动画声明，但动画结束后它会恢复为原始状态。
基本上，我有一个动态高度
我想在没有引导程序的情况下进行这项工作，或者将css3方法放平并在angular的动画中进行。 / p>
以下是动画定义
export const deltaScore = trigger（
deltaScore，
[
state（ void，style（{
height： *
}
）
），
state（'*'，style（{height： *}））），
state（'update'，style（{height： {{height}}}））），
transition（
* => *，
[style（{height： *}），animate（'1s easy-in'）]
），
transition（
*< => update，
[style（{height： *}}），animate（'1s ease-in'）]
）
]，{height：0}
）;
已更新：插件
除了使用触发器和状态，您还可以使用AnimationBuilder，它简化了事情，我认为它最适合不需要状态和触发器的情况。当然，动画的最终结果会保留下来，直到您决定制作另一个动画为止。
模板：
< div class = progress-wrap>
{{progress}}
< div #progressBar class = progress-bar>< / div>
< / div>
组件：
从'@ angular / core'导入{ElementRef};
从 @ angular / animations导入{AnimationBuilder，动画，样式}；
@Component（{
// ...
}）
出口类MyComponent {
@ViewChild（'progressBar'） progressBar：ElementRef;
animationPlayer;
构造函数（
private animBuilder：AnimationBuilder
）{}
updateProgress（progress = null）：void {
const progressAnimation = this.animBuilder.build（[
animate（`430ms easy-out`，style（{
'height'：`$ {!! progress？progress +'％'：'*' }`
}））
]）;
this.animationPlayer = progressAnimation.create（this.progressBar.nativeElement）;
this.animationPlayer.onDone（（evt）=> {
console.log（'ANIMATION DONE'，evt）;
//没有触发或状态的概念'在这里，
// //这个事件给你的唯一东西是'phaseName'，
//你已经知道了...
//但是完成的回调在这里，你可以完成动画结束时
//可能需要做的任何事情
}）；
this.animationPlayer.play（）;
}
}
然后，您可以简单地：
this.updateProgress（80）; //将进度条动画化为80％
this.updateProgress（）; //如果要设置为自动高度的动画（不是进度动画需要它，而是在其他情况下）
我对plnkr进行了一些调整，以使用动画生成器来实现进度和增长： https://plnkr.co/edit/K1r3I8QZOmMIAGEYC2fw?p=preview
当然，您不会需要将 animationPlayer作为类的属性...它可以只是方法中的局部变量，但也许您想从另一个方法中访问同一实例，将其暂停或手动结束。
PS state（）应该肯定能够接受输入参数（并且有一个功能要求此处），但我认为触发器仅适用于您只需要进行几次过渡的情况。每当您需要触发高度的动画时，您都不想随机分配触发值。 AnimationBuilder是适合您的案例的更好选择。
I'm working with Angular4 and their animation. I'm trying to pass dynamic values to an animation declaration but it revers to it's original state after the animation finishes.
Basically, I have a dynamic height that will then trigger the animation based on that height.
I'd like to make this work without bootstrap, or flat out css3 approaches and do it in angular's animation.
Below is the animation definition
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 }
);
Updated: plunk
Instead of using triggers and states, you could use the AnimationBuilder, which simplifies things and I think it's best fitted for situations like these, when you don't need state and triggers. And the end result of the animation is kept, of course, until you decide to do another animation.
Template:
<div class="progress-wrap">
{{progress}}
<div #progressBar class="progress-bar"></div>
</div>
Component:
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();
}
}
Then, you can simply:
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)
I've made some adjustments to the plnkr to use animation builder for the progress and for the growth: https://plnkr.co/edit/K1r3I8QZOmMIAGEYC2fw?p=preview
Of course, you don't need to have 'animationPlayer' as a property of your class... It can simply be a local variable in your method, but maybe you want to access the same instance from within another method, pause it or end it manually.
P.S. state() should definitely be able to accept input params (and there is a feature request for that here), but I think triggers are meant for situations when you'd only have a couple of transition. You wouldn't want to randomize a trigger value whenever you need to trigger an animation for the height. AnimationBuilder is the better choice for your case.
这篇关于动画后，Angular 4动态高度动画将还原的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
