I have been playing around with Angular2's animation DSL and I'm a bit confused as to how restrict animations to specific media screen sizes.

For example, lets say I have a logo that on the home page is 400px wide and shrinks to 200px wide when the user visits any other page on a puter 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'))
  ])
]
...

Yet on a mobile device it needs to remain at 100px for every page.

I understand I could control different animations by controlling what is displayed in the DOM, like below, but that could create an insane amount of code duplication to handle each animation variation 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>

What's the proper way to constrain different animations to specific @media selector sizes?

I have been playing around with Angular2's animation DSL and I'm a bit confused as to how restrict animations to specific media screen sizes.

For example, lets say I have a logo that on the home page is 400px wide and shrinks to 200px wide when the user visits any other page on a puter 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'))
  ])
]
...

Yet on a mobile device it needs to remain at 100px for every page.

I understand I could control different animations by controlling what is displayed in the DOM, like below, but that could create an insane amount of code duplication to handle each animation variation 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>

What's the proper way to constrain different animations to specific @media selector sizes?

• javascript
• css
• animation
• angular

Share Improve this question Follow asked Aug 5, 2016 at 20:10 BrentShanahanBrentShanahan 69111 gold badge77 silver badges1717 bronze badges 2

• There is no proper direct way I think.You can control it through javascript only. – micronyks Commented Aug 6, 2016 at 4:19
• I would like to know as well, what is the proper way to tackle different viewports? @micronyks suggested you control it with JS, how? – Demiro-FE-Architect Commented Nov 1, 2016 at 10:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I have a solution, just do not know if it's the best. I had a similar problem, but solved.

I have a variable that says if it is open or closed (menuOpen) only varies 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 make a single function to resolution, I is that I have not done

    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 will have to deal with more states.

There is a simpler way to achieve this with animation callbacks. In template you do:

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

then in the ponent:

...
 animationStarted(event) {
    // remove all classes you use. E.g.:
    event.element.classList.remove('class1');
    event.element.classList.remove('class2');
  }

  animationDone(event) {
    // add class based on the state. E.g:
    const classToApply = this.state ? 'class1' : 'class2';
    event.element.classList.add(classToApply);
  }
...

and then in the css you can do media queries like:

.some-element{
  // styles here

  // some media query
  @media ... {

    &.class1 {
      // class1 styles here
    }

    &.class2 {
      // class2 styles here
    }
    ...