角度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動態高度動畫動畫恢復

回答

相關問題