Question

我需要帮助。我已经阅读了很多有关角度动画的内容，并已成功应用于简单的解决方案。在我超过45分钟的搜索中，我无法找到与我的情况有关的问题。

我有一个名为 CareerListingComponent 的主要组件。它从服务中获得工作机会（职业）。然后使用另一个名为 CareerBoxComponent 的组件，使用 ngFor 循环打印每个作业的框。

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] =“'in'”中的属性fadeIn和fadeOut但它不起作用。

我在 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'))

                ])
            ]

我的猜测是我的带有选择器 app-career-box 的名为 CareerBoxComponent 的盒子组件不会通知父组件有关其显示和隐藏的信息。

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);
  }
}

Answer 1

我认为动画未应用于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

Angular2动画 - 无法在组件上的ngFor循环上设置动画

1 个答案: