कोणीय 2 एनिमेशन मीडिया प्रश्न

Question

मैं एंगुलर 2 के एनीमेशन डीएसएल के साथ खेल रहा हूं और मैं थोड़ा उलझन में हूं कि विशिष्ट मीडिया स्क्रीन आकारों में एनिमेशन को प्रतिबंधित कैसे करें।

उदाहरण के लिए, मान लें कि मेरे पास एक लोगो है जो होम पेज पर 400px चौड़ा है और जब उपयोगकर्ता कंप्यूटर मॉनिटर पर किसी अन्य पृष्ठ पर जाता है तो 200px चौड़ा हो जाता है।

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

फिर भी मोबाइल डिवाइस पर इसे प्रत्येक पृष्ठ के लिए 100px पर रहने की आवश्यकता है।

मुझे समझ में आता है कि मैं डीओएम में प्रदर्शित होने वाले नियंत्रण को नियंत्रित करके विभिन्न एनिमेशन को नियंत्रित कर सकता हूं, लेकिन यह प्रत्येक स्क्रीन आकार के लिए प्रत्येक एनीमेशन विविधता को संभालने के लिए कोड डुप्लिकेशन की पागल राशि बना सकता है।

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

विशिष्ट @media चयनकर्ता आकारों में विभिन्न एनिमेशन को बाधित करने का उचित तरीका क्या है?

Answer 1

मेरे पास एक समाधान है, बस यह नहीं पता कि यह सबसे अच्छा है या नहीं। मुझे एक ही समस्या थी, लेकिन हल हो गया।

मेरे पास एक वैरिएबल है जो कहता है कि यह खुला या बंद है (मेनू ओपन) केवल सत्य और गलत के बीच बदलता है, और तीन राज्यों के साथ एक चर: 0 या 1 या 2 (ऑनऑपेन) मेरे पास तीन राज्य हैं, आप इसे देखते हैं यहाँ

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

आप संकल्प के लिए एक एकल समारोह कर सकते हैं, मुझे लगता है कि मैं

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; 

       } 

      } 
    } 

मेरे टेम्पलेट में नहीं किया है मैं यह

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

मुझे लगता है कि आपके मामले में अधिक राज्यों से निपटना होगा।

Answer 2

एनीमेशन कॉलबैक के साथ इसे प्राप्त करने का एक आसान तरीका है। टेम्पलेट में आप कार्य करें:

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

तो घटक में:

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

और फिर सीएसएस में आप मीडिया क्वेरी कर सकते हैं जैसे:

.some-element{ 
    // styles here 

    // some media query 
    @media ... { 

    &.class1 { 
     // class1 styles here 
    } 

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