7-я угловая директива RoutingTrainsition, высота добавляется неправильно - PullRequest
Новая
       26

7-я угловая директива RoutingTrainsition, высота добавляется неправильно

0 голосов
/ 17 апреля 2019

Я создал директиву Smooth Height для предыдущего углового приложения, и она работала как положено. Идея состоит в том, чтобы взять высоту из предыдущего контента и запустить новый контент с этой высотой, а затем анимировать его до исходной высоты с переходом.

Сейчас я работаю над средним веб-сайтом и хотел бы использовать ту же директиву, которую я создал ранее для моего перехода к маршрутизации, но по какой-то причине он не ведет себя так, как я ожидал. Начальная анимация работает, как и ожидалось, но следующие, кажется, добавляют предыдущую высоту с новой высотой, а затем начинают с этой высоты. Это вызывает отскок в div ниже и больше не является плавным переходом. Странно, когда я спамил навигацию со страницы 1 на страницу 2, высота оживляет, как и должна, но без перехода от X-> X или Y-> Y.

Я пытался сохранить предыдущую высоту, а затем вычесть добавленную высоту из предыдущего и текущего маршрута. Но я не могу заставить его работать.

Я создал быстрый пример на stackblitz, который иллюстрирует проблему: https://stackblitz.com/edit/angular-md1j8k?embed=1&file=src/app/app.component.html

Это директива 

import { Directive, OnChanges, Input, HostBinding, ElementRef } from '@angular/core';
import { transition, trigger, style, animate } from '@angular/animations';

export const smoothHeight = trigger('grow', [
  transition('* <=> *', [style({ height: '{{startHeight}}px', opacity: 0,
   transform: 'translate'+'{{upOrDown}}'+'('+'{{direction}}'+'100%)'}), animate('.5s ease')], {
    params: { startHeight: 0}
  }),
]);

@Directive({
  selector: '[smoothHeight]',
  host: { '[style.display]': '"block"', '[style.overflow]': '"hidden"' }
})
export class SmoothHeightAnimDirective implements OnChanges {
  @Input() smoothHeight;
  @Input() left;
  @Input() up;
  direction : string;
  upOrDown: string;
  startHeight: number;
  constructor(private element: ElementRef) {
    this.setStartHeight();
  }

  @HostBinding('@grow') get grow() {
    return {value: this.smoothHeight,
      params: { startHeight: this.startHeight,
                upOrDown: this.upOrDown,
                direction: this.direction  } };
  }

  setStartHeight() {
    this.startHeight = this.element.nativeElement.clientHeight
  }

  ngOnChanges(changes) {
    this.setStartHeight();
    this.setUpOrDown();
    this.setDirection();
  }
  setDirection() {
    this.direction = this.left ? '-' : '';
  }
  setUpOrDown() {
    this.upOrDown = this.upOrDown ? 'X' : 'Y';

  }
}

А вот как я это использую 

<div  [@smoothHeight]="prepareRoute(outlet)" [up]="false" [left]="false">
      <router-outlet #outlet="outlet"></router-outlet>
</div>

Буду признателен за вашу помощь! И я довольно новичок с угловой анимацией и анимацией в целом, поэтому я извиняюсь, если я пропустил некоторые основные вещи.

...