角度4同時動畫

我想將我的webapp從AngularJS移植到Angular 4，而且我有一些動畫問題。對於「Google圖片」類型的視圖，我有兩個動畫需要在點擊某個項目時同時發生;一個div需要邊緣底部增加，並且該div的一個孩子需要逐漸出現，使用ngIf和高度過渡。兩個動畫分開工作，但如果我將兩個動畫放在各自的元素上，則只有第一個可以工作。角度4同時動畫

我做了一個最小的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; 
    } 
}

如果單擊該按鈕，什麼應該發生的是，新的內容擴展在「這裏的東西」之間以及「別的東西」。實際發生的情況是，兩個框架按預期彼此遠離，但新內容立即彈出。如果我從第一個div中刪除[@expand]動畫，那麼新的內容確實會逐漸成長，但顯然這兩個容器div並沒有爲它騰出空間。

讓這些動畫同時工作有一個竅門嗎？

來源

2017-08-18 Christoph

我報道這個行爲的錯誤，因爲我找不到任何合理的解釋爲什麼發生這種情況。問題可以在https://github.com/angular/angular/issues/18794找到 – Christoph

我不知道爲什麼這個錯誤的發生，但如果你改變你這樣的模板，它的工作原理：

<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>是沒有一分第一個。

所以股利其他的人之間保持（刪除position: absolute），您可以更改CSS代碼：

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

來源

2017-12-06 15:10:05

角度4同時動畫

回答

相關問題