角4 rc.2`Renderer.animate（）`方法替換

之前4- rc.2改變有Renderer.animate()方法，我用於移除頁面加載器（即沒有棱角應用程序的一部分並且示出了角被加載之前）像這樣角4 rc.2`Renderer.animate（）`方法替換

const loaderElement = bodyElement.querySelector(this.loaderSelector); 

const loaderFadeOutAnimation = this.renderer.animate(
    loaderElement, 
    { 
     styles: [ { opacity: 1 } ] 
    }, 
    [ 
     { 
     offset: 1, 
     styles: { 
      styles: [ { opacity : 0 } ] 
     } 
     } 
    ], 
    300, 
    0, 
    'ease' 
); 

loaderFadeOutAnimation.onDone(() => loaderElement.remove()); 

loaderFadeOutAnimation.play();

這可怎麼現在新的渲染類或其他工具來實現的動畫漸變？

來源

2017-03-02 drow

它解決了角4.2+

import { AnimationBuilder, animate, style } from '@angular/animations'; 
... 
const loaderFadeOutAnimation = this.animationBuilder.build([ 
    style({ opacity: 1 }), 
    animate(200, style({ opacity: 0 })), 
]); 

const loaderFadeOutAnimationPlayer = loaderFadeOutAnimation.create(loaderElement); 

loaderFadeOutAnimationPlayer.onDone(() => loaderElement.remove()); 

loaderFadeOutAnimationPlayer.play();

來源

2017-07-03 12:45:42 drow

在寫這篇文章的時候，角度是4.0.0（隱形-改造）。

renderer.animate()不是從4.0不再支持起因爲動畫已經從@angular/core在自己的包@angular/animations被分離和現在。我已經搜索自己的答案，並沒有找到任何公共API;然而，有一個Animation class這是沒有記錄，可能會做的伎倆。它有一個叫做create的私有方法，它會給你renderer.animate()用來返回的AnimationPlayer。

現在，您可以訪問類通過import { ɵAnimation as Animation } from '@angular/animations/browser';。就像我說的那樣，它是無證的，但看起來at the spec可能暗示你可以利用它的某種方式。我在那裏AnimationMetadata需要提供的情況下，都可以由角動畫DSL使用相同的功能來構建，例如，animate，style，等等。

說了上面的，私有的API有可能發生變化，當然，因此採取與一粒鹽這些信息。我的猜測是，在計算動畫以其他形式返回之前不久，這可能只是一個傳遞狀態，因爲動畫是分離的。

順便提及，Renderer也棄用。 Renderer仍將被注入，但移動到Renderer2可能是升級時正確的移動方式。

希望這會有所幫助！

來源

2017-03-26 02:56:08 emarticor

角4 rc.2`Renderer.animate（）`方法替換

回答

相關問題