रूट एनीमेशन कोणीय 4

Question

जिस ऐप पर मैं काम कर रहा हूं, उसे मार्गों के माध्यम से आगे और पीछे नेविगेट करने की क्षमता की आवश्यकता होती है, ताकि जब आप एक दिशा में ऐप के माध्यम से एक तरफ नेविगेट करते हैं तो घटकों को बाएं से दाएं से एनिमेट किया जाता है, और जब आप वापस नेविगेट करते हैं दायें से बाएं नेविगेट करें।

अर्थात

component1 -> component2 = left -> right animation 
component2 -> component1 = right -> left animation 

मैं इस NG4 में आसानी से पर्याप्त प्राप्त कर सकते हैं, लेकिन मुद्दा यह है कि यह दोनों बाहर निकलें और प्रवेश करने घटकों नेविगेट नहीं करता है। बाहर निकलने वाला घटक बस गायब हो जाता है और प्रवेश घटक एनिमेट करता है।

मैं इसे एनजी 2 में भी प्राप्त कर सकता हूं - लेकिन जब आपके पास सशर्त एनीमेशन होता है तो जटिलता उत्पन्न होती है। अर्थात।

component2 -> component3 = left -> right animation 
component2 -> component1 = right -> left animation 

समस्या यहां अगले या पिछले मार्ग के आधार पर एक अलग एनीमेशन ट्रिगर कर रही है।

क्या किसी के पास दोनों दिशाओं को एक साथ दिशा में एनिमेट करने के मुद्दे को हल करने के लिए एनजी 2 या 4 में कोई समाधान है?

मैंने इसे प्लंकर में नहीं रखा है क्योंकि मुझे नहीं पता कि इसमें एक एनजी 4 ऐप कैसे स्थापित किया जाए। क्षमा याचना।

animations: [ 
    trigger('routerAnimations',[ 
     transition('page1 => page2',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page2 => page1', [ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]), 
     transition('page2 => page3',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page3 => page2',[ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]), 
     transition('page3 => page4',[ 
      style({transform: 'translateX(100%)'}), 
      animate('500ms') 
     ]), 
     transition('page4 => page3',[ 
      style({transform: 'translateX(-100%)'}), 
      animate('500ms') 
     ]) 
    ]) 
] 

और एक समारोह है कि प्रत्येक मार्ग से एक एनीमेशन मूल्य पकड़ लेता है और:

मेरे NG4 समाधान this demo apphttps://github.com/matsko/ng4-animations-preview

लेकिन अनिवार्य रूप से मेरी app.component.ts में मैं निम्नलिखित एनीमेशन है पर आधारित है बांध यह <router-outlet> in app.component.html पर आउटलेट चर करने के लिए (?):

export class AppComponent { 
    prepareRouteTransition(outlet) { 
     let routeData: any; 
     try { 
      routeData = outlet['_activatedRoute'].snapshot.routeConfig['animation']; 
     } catch(e) { 
      return ''; 
     } 
     return routeData.value; 
    } 
} 

समारोह ऊपर पकड़ लेता है एनीमेशन मूल्य जो संक्रमण आरंभ और अंत मान परिभाषित करने के एनीमेशन में प्रयोग किया जाता है:

export const APP_ROUTES = [{ 
    path: '', 
    component: Page1Component, 
    animation: { 
     value: 'page1', 
    } 
    }, 
    { 
    path: 'page2', 
    component: Page2Component, 
    animation: { 
     value: 'page2', 
    } 
    }, 
    { 
    path: 'page3', 
    component: Page3Component, 
    animation: { 
     value: 'page3' 
    } 
    }, 
    { 
     path: 'page4', 
     component: Page4Component, 
     animation: { 
      value: 'page4' 
     } 
    } 
]; 

app.component.html:

<div class="page" [@routerAnimations]="prepareRouteTransition(outlet)"> 
    <router-outlet #outlet="outlet"></router-outlet> 
</div> 

Answer 1

आप एनिमेशन कि :enter और :leave तत्वों के लिए क्वेरी को परिभाषित करते हुए अब इस लक्ष्य को हासिल कर सकते हैं ।

इस उदाहरण से बाहर निकलते समय मार्ग बाहर चेतन जाएगा और प्रवेश करने के मार्ग को सुचारू रूप में चेतन:

const slideLeft = [ 
    query(':leave', style({ position: 'absolute', left: 0, right: 0 ,transform: 'translate3d(0%,0,0)' })), 
    query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(-100%,0,0)' })), 
    group([ 
    query(':leave', 
     animate('1s', style({ transform: 'translate3d(100%,0,0)' }))), 
    query(':enter', 
     animate('1s', style({ transform: 'translate3d(0%,0,0)' }))) 
    ]) 
] 

const slideRight = [ 
    query(':leave', style({ position: 'absolute', left: 0, right: 0 , transform: 'translate3d(0%,0,0)'})), 
    query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(100%,0,0)'})), 

    group([ 
    query(':leave', 
     animate('1s', style({ transform: 'translate3d(-100%,0,0)' }))), 
    query(':enter', 
     animate('1s', style({ transform: 'translate3d(0%,0,0)' }))) 
    ]) 
] 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    animations: [ 
    trigger('routerAnimations', [ 
     transition('products => product-details', slideRight), 
     transition('product-details => products', slideLeft) 
    ]) 
    ] 
})