Angular2 animacje mediów odpytuje

Question

I zostały gry z Angular2 za animacji DSL i jestem nieco zdezorientowany, jak ograniczyć animacje do konkretnych rozmiarów ekranu mediów.

Na przykład, powiedzmy, że mam logo, które na stronie głównej jest 400px szerokości i 200px szerokości kurczy się, gdy użytkownik odwiedza dowolną inną stronę na monitorze komputera.

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

Jednak na urządzeniu mobilnym musi pozostać na poziomie 100 pikseli dla każdej strony.

Rozumiem, że mogłem kontrolować różne animacje, kontrolując to, co jest wyświetlane w DOM, jak poniżej, ale mogłoby to stworzyć szaloną ilość duplikacji kodu do obsługi każdej odmiany animacji dla każdego rozmiaru ekranu.

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

Jaki jest właściwy sposób ograniczenia różnych animacji do określonych rozmiarów selektorów @media?

Answer 1

Mam rozwiązanie, po prostu nie wiem, czy to jest najlepszy. Miałem podobny problem, ale rozwiązany.

Mam zmienną, która mówi, że jest otwarta lub zamknięta (menuOpen) różni się tylko między wartością true a fałszem oraz zmienną z trzema stanami: 0 lub 1 lub 2 (onOpen) Mam trzy stany, widzisz to tutaj

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')) 
       ]) 
      ].... 

można zrobić jedną funkcję do uchwały, że jest to, że nie zrobili

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; 

       } 

      } 
    } 

w moim szablonie mam to

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

Myślę, że w twoim przypadku będzie musiał zająć się więcej państw.

Answer 2

Istnieje prostszy sposób osiągnięcia tego przy pomocy wywołań animacji. W szablonie zrobić:

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

następnie w komponencie:

... 
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); 
    } 
... 

a następnie w css można zrobić zapytań o media jak:

.some-element{ 
    // styles here 

    // some media query 
    @media ... { 

    &.class1 { 
     // class1 styles here 
    } 

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