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

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

Мне также необходимо использовать директиву 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>

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

введите здесь описание изображения

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

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


angular angularjs angular-components angular-upgrade angular-cdk
person lostintranslation    schedule 13.04.2020    source источник
comment
Я думаю, что он работает отлично, просто увеличьте продолжительность до 5 секунд в CSS и проверьте.   -  person Jasdeep Singh    schedule 16.04.2020
comment
@ Принц извините, что не работает. Тест, который говорит, что это исчезнет раньше, не должен исчезнуть до завершения анимации. В этом можно убедиться, удалив элемент scroll-wrapper из slide.component.js.   -  person lostintranslation    schedule 17.04.2020
comment
если вы говорите о производительности, вам не следует использовать angular. довольно просто   -  person Constantin    schedule 22.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

Согласно коду, вы пытаетесь обработать видимость компонента 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

person Jasdeep Singh    schedule 18.04.2020
comment
спасибо, что исправили опубликованный мною stackblitz. К сожалению, я написал stackblitz, чтобы выделить проблему, с которой я столкнулся с большим приложением. В этом приложении я уже импортировал BrowserAnimationsModul. Я буду продолжать копать, чтобы увидеть, в чем разница между рабочим stackblitz и моим приложением. Если у вас есть другие идеи, почему мое приложение может показывать такое же поведение, я все слышу. - person lostintranslation; 20.04.2020
comment
Я подумаю, но без взгляда на ваш сайт / код это будет менее возможно. - person Jasdeep Singh; 20.04.2020
comment
Вы нашли проблему? Я не могу придумать ни одной причины, вызывающей эту проблему. - person Jasdeep Singh; 21.04.2020