角度2のアニメーションが期待どおりに動作しない

Question

角度2のrc6を使用しています。ルートパスに基づいてページの切り替えを行いたいと思います。次のアニメーションを2つのパス（テストとして）に適用します。私は、不透明度をアニメーション化したいだけです。しかし、私が何をしても、ページがY軸上で翻訳されるのを止めることができません。私が見つけた唯一のオプションは、ホストとしてstyle.position: absoluteを使用しているようです。私は、ページ上のすべての要素の位置をネジ止めするので、それを使用したくありません。私はまたなしでちょうどopactiyを持っていることを試みた。それはどちらもうまくいかなかった。

host: { 
    '[@routeAnimation]': 'true', 
    '[style.display]': "'block'" 
    }, 
    animations: [ 
    trigger('routeAnimation', [ 

     transition('void => *', [ 
     style({opacity: 0, transform: 'translatey(0)'}), 
     animate('0.2s') 
     ]), 
     transition('* => void', [ 
     animate('0.2s', style({opacity: 0, transform: 'translatey(0)'})) 
     ]) 
    ]) 
    ] 

私はここに何か不足していると確信しています。よく分かりません。助けてくれてありがとう。

Answer 1

1）あなたは変換XまたはYの

style({opacity: 0, transform: 'translatey(0)'}), 

の値がそうのような大文字であるべき誤っtransteYを綴ら見ることができるように：

style({opacity: 0, transform: 'translateY(0)'}), 

2）私が見るもう一つあなたのコードでは、あなたのアニメーションセレクタをバインドしたことがあります：[@routeAnimation]': 'true'このセレクタをHTML上でこのように使用した場合、ブール値をトグルすることによって決してオンにすることはできません。isMovingY = 'false'あなたがアニメーションで宣言した "enter"/"leave"状態をアクティブにできるように、例えばクリックしてそれを切り替えると、[@routeAnimation]': isMovingYのようにセレクタに配置されます。