Анимационный контент рано исчезает в пониженном Angular компоненте

Question

У меня есть гибридное приложение Angular / AngularJS. Чтобы запустить это приложение без проблем с производительностью, я запускаю его как приложение AngularJS, используя * downgradeModule Angular.

У меня также есть необходимость использовать директиву scroll cdk, которая находится в Angular 8 в моем приложении AngularJS.

Например, это шаблон AngularJS. Компонент "scroll-wrapper" находится в модуле Angular. Эта оболочка прокрутки использует 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>

Все эти функции работают в моем приложении. Когда думаю перерыв, когда я добавляю анимацию. По какой-то причине, когда я анимирую вышеупомянутый шаблон in / out, контент в scroll-wrapper прекрасно работает на анимации «in», но тот же контент исчезает раньше (до завершения анимации) на анимации «out».

Вот созданный мной стек, который, вероятно, является самым простым способом демонстрации и отладки.

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

Answer 1

Согласно коду, вы пытаетесь обработать видимость компонента Angular, используя AngularJS. Прямо сейчас, как только вы нажимаете на переключатель button, оно делает выражение внутри ng-if ложным и удаляет содержимое (которое является Angular компонентом).

В идеале, весь шаблон слайда должен исчезнуть, но благодаря анимации вы можете его увидеть.

Если вы хотите сохранить содержимое до полного исчезновения Div слайда, вам необходимо импортировать BrowserAnimationsModule в app.module.ts. Это будет поддерживать переход до тех пор, пока ваш слайд DIV не исчезнет.

Необходимые изменения:

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

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

Здесь вы найдете рабочий пример

Вы можете узнать больше об анимации здесь: https://angular.io/guide/animations