Angular2 animated media queries

Question

I played with Angular2 DSL animations, and I'm a little confused about how to limit animations to specific screen sizes.

For example, let's say I have a logo that is 400 pixels wide on the homepage and is compressed to 200 pixels wide when a user visits any other page on a computer monitor.

... animations: [ trigger('homeLogoState',[ state('inactive', style({ width: '200px', transition: 'width' })), state('active', style({ width: '400px', transition: 'width' })), transition('inactive <=> active', animate('300ms ease-in')) ]) ] ... 

However, on a mobile device, it should remain at 100 pixels for each page.

I understand that I can control various animations by controlling what is displayed in the DOM, as shown below, but this can create an insane amount of code duplication to handle each animation change for each screen size.

 <div class="hidden-under-1920px" @logoAnimationOne="page"> <img src="logo.png"> </div> <div class="hidden-under-1280px" @logoAnimationTwo="page"> <img src="logo.png"> </div> 

How can I limit various animations to specific @media selector sizes?

Answer 1

I have a solution, I just don’t know if this is better. I had a similar problem, but I solved it.

I have a variable that says it is open or closed (menuOpen) only changes between true and false, and a variable with three states: 0 or 1 or 2 (onOpen) I have three states, you see it here.

 import { Component, trigger, state, animate, transition, style, HostListener} from '@angular/core' .... .... animations: [ trigger('visibilityChanged', [ state('0', style({ width: '50px' })), state('1', style({ width: '25%' })), state('2', style({ width: '100%' })), transition('* => *', animate('.3s')) ]) ].... 

You can do one function for permission, I am in what I did not

  export class AppComponent { wt; @HostListener('window:resize', ['$event']) sizeWindow(event) { this.wt = event.target.innerWidth; this.sizeMenu(this.wt); console.log('width =>', this.wt); } constructor() { this.wt = window.innerWidth; } sizeMenu(width) { if (this.menuOpen === true) { if (width >= 600) { this.onTestOpen = 1; } else if (width < 600) { this.onTestOpen = 2; } } else if (this.menuOpen === false) { this.onTestOpen = 0; } } openMenu() { let wwt = window.innerWidth; if (this.menuOpen === false) { if (wwt >= 600) { this.onTestOpen = 1; } else if (wwt < 600) { this.onTestOpen = 2; } this.menuOpen = true; } else if (this.menuOpen === true) { this.onTestOpen = 0; this.menuOpen = false; } } } 

in my template i have it

 <div class="geral" [@visibilityChanged]="onOpen"></div> 

I think in your case you have to deal with a lot of conditions.

Answer 2

There is an easier way to achieve this with animation callbacks. In the template you do:

 ... <element [@triggerName]="state" (@triggerName.start)="animationStarted($event)" (@triggerName.done)="animationDone($event)"> ... 

then in the component:

 ... animationStarted(event) { // remove all classes you use. Eg: event.element.classList.remove('class1'); event.element.classList.remove('class2'); } animationDone(event) { // add class based on the state. Eg: const classToApply = this.state ? 'class1' : 'class2'; event.element.classList.add(classToApply); } ... 

and then in css you can do media queries, for example:

 .some-element{ // styles here // some media query @media ... { &.class1 { // class1 styles here } &.class2 { // class2 styles here } ...