4-компонентная отзывчивая анимация Angular

Невозможно определить поведение JavaScript на основе запросов CSS @Media. Вам придется сделать то же, что и я, где я создал службу внешнего вида Angular, которая отслеживает размеры окна просмотра и отправляет команды компонентам на основе того, что обнаружено. Затем вы можете управлять анимацией и внешним видом с помощью логики JavaScript вместо логики CSS.

Добавление примера:

Создайте сервис, который отслеживает ширину области просмотра. Если область просмотра меньше, скажем, 500 пикселей, служба выводит мобильное приложение, в противном случае — настольное.

В своем компоненте объявите один триггер, назовем его @slide, с несколькими состояниями. Мы также установим закрытую переменную с именем stateOfYourChoosing, и вы можете установить ее в виде строки.

Затем в вашем шаблоне

<div [@slide]="stateOfYourChoosing"></div>

Затем вы можете выбрать, какое состояние вы хотите, чтобы состояние stateOfYourChoosing было по умолчанию, и как вы хотите, чтобы ваш компонент переходил на основе логики компонента.

Таким образом, если ваша служба внешнего вида выводит рабочий стол, вашим состоянием stateOfYourChoosing по умолчанию будет slideOut.

transition('slideOut => slideIn', animate('100ms ease-in'))

Если служба внешнего вида выводит мобильный, она устанавливает stateOfYourChoosing в mobileSlideOut, а вместо этого используется код перехода

transition('mobileSlideOut => mobileSlideIn', animate('100ms ease-in'))

Затем вы можете управлять всеми своими адаптивными анимациями в модуле анимации, контролируя, в каком состоянии находится ваш триггер.

Один из способов — создать анимацию во время выполнения, а не объявлять ее в декораторе компонентов.

1. Создайте службу, которая будет использоваться компонентами.
2. Создайте новый метод, который получил конфигурацию анимации.
3. Определить размер окна.
4. Создайте и верните анимацию.

Это будет выглядеть примерно так (следующий код не тестировался и является просто примером):

export interface MediaQueryStyle
{
    minWidth: number;
    initialStyle: any; // Style object to apply before animation
    endStyle: any;     // Style object to apply after animation
}

export interface MediaQueryAnimationConfig
{
    element: ElementRef;
    mediaStyles: MediaQueryStyle[];
    duration?: number | string;

    ... // Whatever you need to create your animation 
}

Сервис:

@Injectable({
    providedIn: 'root'
})
export class MediaQueryAnimationService
{
    constructor(private builder: AnimationBuilder) { }

    public create(config: MediaQueryAnimationConfig): AnimationPlayer
    {
        // Read animation configuration
        const duration = config.duration || 1000;
        const mediaStyle = this.findMediaStyle(config.styles);

        // Build the animation logic (add here any other operation, e.g. query)
        const animation = this.builder.build([
            style(mediaStyle.initialStyle),
            animate(duration, style(mediaStyle.endStyle)
        ]);

        return animation.create(config.element);
    }

    private findMediaStyle(styles: MediaQueryStyle[])
    {
        const viewWidth = window.innerWidth;

        // Some logic to scan the array and return the style that complies with `viewWidth`
        return styles.find(style => ...);
    }
}

В вашем компоненте:

<something ... #someElement></something>

@Component({
    selector: 'something',
    templateUrl: './something.component.html',
    styleUrls: ['./something.component.scss']
})
export class SomethingComponent implements OnInit
{
    @ViewChild('someElement')
    private elementRef: ElementRef;

    constructor(private mqAnimation: MediaQueryAnimationService) { }

    ngOnInit() { ... }

    public onSomeEvent()
    {
        const player = mqAnimation.create({ element: elementRef.element, minWidth: ... });

        player.onDone(player.destroy);

        player.play();
    }
}

Полезное чтение и примеры:

https://angular.io/api/animations/AnimationBuilder

https://stackblitz.com/edit/angular-animation-builder

Анимация внутри MatDialog не работает

Удачи ✌

Не самые надежные решения, но если конечное состояние анимации одинаково для каждого медиа-запроса (например, вы анимируете оба элемента для просмотра, но хотите разные анимации для мобильных и настольных компьютеров), вы можете определить начальные состояния в css используя медиа-запросы, а в компоненте angular используйте «*» для начального состояния целевых свойств css

trigger('animation', [
  state('out, none, void', style({
    transform: '*'
  })),
  state('in', style({
    transform: 'translate3d(0, 0, 0)'
  })),
  transition('below => in, none => in', animate(`300ms ease`))
])

затем в css

.class {
  //animate from bottom on mobile
  transform: translate3d(0, -100%, 0);

   @media all and (min-width: 920px) {
     //animate from left on desktop
     transform: translate3d(-100%, 0, 0)
   }
}