Question

我目前的角度版本是：4.2.6

我正在使用角度动画dsl为模态组件的开口设置动画。该组件嵌套在使用*ngIf显示/隐藏的另一个组件中。

以下是页面结构的基本概述：

<parent-wrapper>

  <div class="panel" *ngIf="toggle">
    <child-component>
      <!-- Form Stuff -->
      <modal-component active="modalActive"></modal-component>
    </child-component>
  </div>

  <div class="panel" *ngIf="toggle2">
    <child-component>
      <!-- Form Stuff -->
      <modal-component active="modalActive"></modal-component>
    </child-component>
  </div>

</parent-wrapper>

页面加载时，切换值为false。在此期间，日志记录显示组件已初始化但尚未添加到DOM。

当我将其中一个切换设置为true时，它会渲染DOM中的组件，但模态组件的动画样式未正确初始化，这会阻止动画正常工作。模态按预期运行但它没有动画。

这是我在检查器中看到的（用动画输入“非活动”初始化的模态组件）：

<app-modal class="ng-tns-c21-7" ng-reflect-active="inactive">
  <div class="app-modal ng-trigger ng-trigger-modalAnim">

如果我将模态组件移动到*ngIf之外，它会初始化并按预期呈现给DOM，并且动画效果很好。

这就是正确初始化的模式（用动画输入“非活动”初始化模态组件）：

<app-modal class="ng-tns-c21-7" ng-reflect-active="inactive">
  <div class="app-modal ng-trigger ng-trigger-modalAnim" style="z-index: 999; opacity: 1; display: block; transition: all;">

将模态与子组件打包在一起非常重要，因此将其移动到其他位置是不可取的。

当从*ngIf呈现模态组件时，是什么阻止将这些样式应用于模态DOM？

Angular - 使用ngIf进行动画初始化

0 个答案: