直接在组件选择器上使用 Angular 动画不会影响组件的内容

Question

我正在尝试对某些组件的隐藏进行转换。我在我的@Component 中得到了这个：

@Component({
  selector: 'app-sidebar-aplication-wrapper',
  templateUrl: './sidebar-aplication-wrapper.component.html',
  styleUrls: ['./sidebar-aplication-wrapper.component.css'],
  animations: [
      trigger(
        'inOutAnimation', 
        [
          transition(
            ':enter', 
            [
              style({  opacity: 0 }),
              animate('1s ease', 
                      style({ opacity: 1 }))
            ]
          ),
          transition(
            ':leave', 
            [
              style({  opacity: 1 }),
              animate('1s ease', 
                      style({  opacity: 0 }))
            ]
          )
        ]
      )
    ]
})

和这个在同一组件的 html 中：

<app-iot-component class="bg-primary " *ngIf="loadedApplication == 'iot'" [@inOutAnimation]></app-iot-component>
<app-issues-component class="bg-primary " *ngIf="loadedApplication == 'issues'" [@inOutAnimation]></app-issues-component>
<app-bookings-component class="bg-primary " *ngIf="loadedApplication == 'booking'" [@inOutAnimation]></app-bookings-component>

问题是我认为转换不会影响组件的内容。我知道一个事实，如果我在正常 div 上应用过渡，过渡就会起作用。有什么想法吗？

Angular 版本： 11.0.9

Answer 1

它应用于它们，但通常它们有 display: inline，所以大多数动画都没有效果。

很高兴为您提供帮助:)

直接在组件选择器上使用 Angular 动画不会影响组件的内容

Using Angular animations directly on the component selector does not affect the content of the component

javascript

angular

angular-animations