Angular2動畫 - 無法在ngFor循環上動畫組件

我需要幫助。我已經閱讀了很多角度動畫，並已成功應用於簡單的解決方案。在超過45分鐘的搜索中，我無法找到與我的情況有關的問題。Angular2動畫 - 無法在ngFor循環上動畫組件

我有一個主要組件叫做CareerListingComponent。它從服務中獲得工作機會（職業）。然後它使用ngFor循環使用另一個稱爲CareerBoxComponent的作業打印每個作業的框。

CareerListingComponent有使用，你可以備選列表選擇下拉菜單： -

<select class="form-control" id="idSelDepartment" name="dept" 

    [ngModel]="searchDept" (ngModelChange)="selectValueChangedDept($event)"> 

      <option value="">Career Area - All</option> 
      <option *ngFor="let dept of arrDept" value="{{dept}}">{{dept}}</option> 
</select>

一切工作正常，除了動畫。如果我從下拉菜單中選擇某些內容，則框會顯示並隱藏，但框變化非常快而沒有任何效果。

我已經使用「SearchPipe：searchCountry：searchCity：searchDept」管道過濾一組職業對象。

<div class="row"> 
    <div class="container grid jobs"> 

     <app-career-box 

     *ngFor="let career of careers | SearchPipe:searchCountry:searchCity:searchDept 
      let index = index; 
      let isOdd = odd; 
      let isEven= even;" 

     [@visibilityChanged]="'in'" 
     [career]="career" 

     ></app-career-box> 

    </div> 
</div>

正如你可以看到我使用的財產[@visibilityChanged] =「‘中’」以淡入淡出和，但它不能正常工作。

在CareerListingComponent我的動畫代碼是

animations: [ 
       trigger('visibilityChanged', [ 
        state('in' , style({ opacity: 1, transform: 'scale(1.0)' })), 
        state('out', style({ opacity: 0, transform: 'scale(0.0)' })), 
        transition('1 => 0', animate('700ms')), 
        transition('0 => 1', animate('700ms')) 

       ]) 
      ]

我的猜測是，我叫CareerBoxComponent與選擇APP-職業箱盒組件不通知父組件關於它的顯示和隱藏。 CareerBoxComponent

@Component({ 
    selector:  'app-career-box', 
    templateUrl: './career-box.component.html', 
    styles:   [] 
}) 
export class CareerBoxComponent implements OnInit { 

    @Input() career: Career; 
    constructor() { } 

    gotoDetailUrl() { 
    window.location.href = this.career.detailUrl; 
    console.log('Redirect to '+ this.career.detailUrl); 
    } 
}

來源

2017-03-14 Sallu

我想，爲什麼動畫不被你的app-career-box組件應用的原因

的源代碼，因爲它們不是block元素。我可能是錯的，但在主機上應用display: block;的風格確實有效。

這是我如何應用在CareerBoxComponent風格：

@Component({ 
    selector: 'app-career-box', 
    template: `...` 
    styles: [` 
    :host { 
    display: block; 
    } 
    `] 
}) 
export class CareerBoxComponent { 
}

Plunkr演示：https://plnkr.co/edit/RYxZoS6thSO7iaU7YEPK?p=preview

來源

2017-03-14 07:07:36 Obaid

謝謝。這個伎倆。 – Sallu

Angular2動畫 - 無法在ngFor循環上動畫組件

回答

相關問題