角4同時アニメーション

Question

私はWebアプリケーションをAngularJSからAngular 4に移植しようとしていますが、アニメーションに問題があります。 "Google Images"タイプのビューでは、アイテムがクリックされたときに同時に発生する必要がある2つのアニメーションがあります。 1つのdivはマージンを必要とし、ngIfとその高さの遷移を使用してdivの子が徐々に表示される必要があります。両方のアニメーションは別々に動作しますが、両方のアニメーションをそれぞれの要素に置くと、最初のアニメーションだけが動作します。

私は私が何を意味するか実証するための最小限のplunkerを作った：あなたがボタンをクリックすると、何が起こる必要がありますが、新しいコンテンツが「ここで何か」の間で展開していることであるhttps://plnkr.co/edit/27EFz3h16icnh3qDzQbY?p=preview

const animationTiming = '1s ease'; 
@Component({ 
    selector: 'my-app', 
    animations: [ 
    trigger('expand', 
     [ 
     state('expanded', style({"margin-bottom": '392px'})), 
     state('collapsed', style({"margin-bottom": '0'})), 
     transition('* => *', animate(animationTiming)) 
     ]), 
    trigger('visibility', 
     [ 
     transition(
      ':enter', [ 
      style({'height': '0'}), 
      animate(animationTiming, style({'height': '*'})) 
      ] 
     ), 
     transition(
      ':leave', [ 
      style({'height': '*'}), 
      animate(animationTiming, style({'height': '0'})) 
      ] 
     ) 
     ]) 
    ] 
    template: ` 
    <button (click)="toggle()">click</button><br/> 
    <div class="container" [@expand]="expanded?'expanded':'collapsed'"> 
     something here 
     <div class="detail" [@visibility] *ngIf="expanded">something else in here</div> 
    </div> 
    <div class="container">something else</div> 
    `, 
}) 
export class App { 
    expanded: boolean = false; 
    toggle() { 
    this.expanded = !this.expanded; 
    } 
} 

と「他の何か"実際には、2つのフレームが予想どおりに離れていくが、新しいコンテンツはただちにポップアップする。最初のdivから[@expand]アニメーションを削除すると、新しいコンテンツは徐々に増えていきますが、明らかに2つのコンテナdivには余裕がありません。

これらのアニメーションを同時に動作させるための秘訣はありますか？

Answer 1

このエラーが発生した理由を私はわからないが、あなたはこのようなあなたのテンプレートを変更した場合、それは動作します：

<button (click)="toggle()">click</button><br/> 
<div class="container" [@expand]="expanded?'expanded':'collapsed'"> 
something here</div> 
<div class="detail" [@visibility] *ngIf="expanded">something else in here</div> 
<div class="container">something else</div> 

二<div>がサブでないときに、2つのアニメーションの動作は、より良い動作しているようです最初のもののディビジョン。

とのdivは（position: absoluteを取り除くことによって）他のものの間にとどまるので、あなたは、CSSコードを変更することができます。

.detail { 
    height: 360px; 
    display: block; 
    border: 1px solid black; 
    left: 0px; 
    right: 0px; 
}