Animation 降级后的内容早早消失 Angular 组件

Question

我有一个混合的 Angular/AngularJS 应用程序。 为了在没有性能问题的情况下运行此应用程序，我使用 Angular 的“downgradeModule”将其作为 AngularJS 应用程序运行。

我还需要在我的 AngularJS 应用程序中使用 Angular 8 中的 scroll cdk 指令。

例如，这是一个 AngularJS 模板。 “滚动包装器”组件位于 Angular 模块中。 该 scroll-wrapper 使用 scroll cdk 来确保内部任何其他降级的 Angular 组件将正确滚动。

<div>
  <p>This Content will remain until animation is complete</p>

  <scroll-wrapper>
    <div>
      Slide Over Content <br>
      This will disappear early <br>
    </div>
  </scroll-wrapper>

</div>

所有这些功能都适用于我的应用程序。 当我添加 animation 时想到中断。由于某种原因，当我将上面的模板动画化时，滚动包装器中的内容在“in”animation 上工作正常，但相同的内容会提前消失（在 animation 完成之前) 在“输出”animation 上。

这是我创建的 stackblitz，因为这可能是展示和调试的最简单方法。

https://stackblitz.com/edit/angular-h3swa7

Answer 1

根据代码，您正在尝试使用 AngularJS 处理Angular组件的可见性。现在，一旦您单击切换button ，它就会使ng-if中的表达式为 false 并删除内容（即 Angular 组件） .

理想情况下，整个幻灯片模板应该消失，但由于 animation，您可以看到它。

如果想保留内容直到整个幻灯片Div消失，需要在app.module.ts里面引入BrowserAnimationsModule。 这将使过渡保持活动状态，直到您的幻灯片 DIV 消失。

需要改变：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
imports:[ BrowserModule,BrowserAnimationsModule ],
  declarations: [ ScrollWrapperComponent ],
  bootstrap:    [ ],
  entryComponents: [ ScrollWrapperComponent ]
})

请在此处找到工作示例

您可以在此处了解有关动画的更多信息： https://angular.io/guide/animations