将动画应用于动态加载的组件 Angular 5

Question

您好，我正在尝试将动画应用到我通过 ComponentFactory

加载的组件

我试过将 angular 动画应用到它的内部选择器并触发 onInit

<p  [@detailExpand]="expand">
  {{ content1 }} {{ content2 }}
</p>

待加载ts文件中的组件：

@Component({
  selector: 'app-rowdetail',
  templateUrl: './rowdetail.component.html',
  styleUrls: ['./rowdetail.component.scss'],
  animations: [
    trigger('detailExpand', [
      state('false', style({ 'height': '0px', 'minHeight': '0', 'visibility': 'hidden' })),
      state('true', style({ 'height': '*', 'visibility': 'visible' })),
      transition('expanded <=> collapsed', animate('1000ms')),
    ]),
  ]
})
export class RowdetailComponent implements OnInit, OnDestroy {
  @Input() content1: string;
  @Input() content2: string;
  @Input('expand') expand: string;
  constructor() { }

  ngOnInit() {
    this.expand = 'false'
    setTimeout(() => {
      this.expand = 'true'
      console.log(this.expand)
    }, 500)

  }
  ngOnDestroy() {
    this.expand = 'false'
    console.log(this.expand)
  }
}

加载组件的函数：

 expandRow(index: number, row) {
    console.log(this.expandedRow, index)
    if (this.expandedRow != null) {
      // clear old message
      this.containers.toArray()[this.expandedRow].clear();
    }

    if (this.expandedRow === index) {
      this.expandedRow = null;
      return;
    } else {
      this.expandedRow = index
      this.expand = 'expanded'
      const container = this.containers.toArray()[index];
      const factory: ComponentFactory<RowdetailComponent> = this.resolver.resolveComponentFactory(RowdetailComponent);
      const messageComponent = container.createComponent(factory);

      messageComponent.instance.content1 = "some text";
      messageComponent.instance.content2 = "some more text";
    // setTimeout(() => {  //this.renderer.addClass(messageComponent.hostView.rootNodes[0].querySelector('p'), 'element-animation')
          // }, 1000)


    }
  }

我也试过应用 class 和 css 动画，但没有任何效果，根本没有动画播放有谁知道最佳做法是什么？

Answer 1

您的转换可能是问题所在：

transition('expanded <=> collapsed', animate('1000ms'))

您的状态称为 'false' 和 'true'。你必须在状态上定义一个转换，而不是在你试图做的任何事情上。

trigger('detailExpand', [
  state('false', style({ 'height': '0px', 'minHeight': '0', 'visibility': 'hidden' })),
  state('true', style({ 'height': '*', 'visibility': 'visible' })),
  transition('true <=> false', animate('1000ms')),
]),

（尽管我不确定这是否有效，因为您使用了这些词。如果无效，请尝试使用 'A' 和 'B' 代替 true 和 false）。

将动画应用于动态加载的组件 Angular 5

Apply animation to dynamically loaded component Angular 5

angular-components

angular