एक रूट घटक

Question

के कोणीय 2 "एनीमेशन में स्लाइड" मान लें कि मेरे पास रूट करने के लिए निश्चित नौसेना में 2 रूटेड घटक और दो राउटरलिंक्स हैं। जब मैं राउटरलिंक्स पर क्लिक करता हूं तो मैं उन्हें दाईं ओर से स्लाइड करना चाहता हूं।

मैं सीएसएस के साथ घटक को ऑफसेट नहीं करना चाहता हूं और सीएसएस कक्षा को बदलने के लिए टाइमआउट फ़ंक्शन का उपयोग करना चाहता हूं ताकि इसे स्लाइड (उदा। NgStyle या ngClass के साथ) में बदल सकें।

क्या एंगुलर 2 में प्राप्त करने के लिए और अधिक सुरुचिपूर्ण तरीके हैं?

धन्यवाद!

Answer 1

साथ कोणीय 4.1 यह अब विशिष्ट मार्ग एनिमेशन बनाने के लिए संभव है। यह एक एनीमेशन ट्रिगर करने से अलग होता है जब एक घटक प्रदर्शित होता है क्योंकि यह आपको एक चिकनी संक्रमण के लिए एक ही समय में प्रवेश/छोड़ने वाले घटक को एनिमेट करने देता है, और आप किस घटक के आने या जाने के आधार पर संक्रमण को संशोधित करने देते हैं। इसका मतलब यह है कि यदि आप सामग्री में ड्रिल कर रहे हैं, तो उसे दाएं से एक घटक स्लाइड करने के लिए जटिल संक्रमण कर सकते हैं, और इसे बाईं ओर स्लाइड करें यदि आप इसे किसी अन्य घटक से 'बैक' बटन के माध्यम से दर्ज कर रहे हैं। (। जैसे app.component.html)

1. सबसे पहले, की तरह तो अपने रूटर आउटलेट पर टिप्पणी:

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

2. इसी घटक परिभाषा (जैसे app.component.js) में लागू prepareRouteTransition(outlet) कार्य करते हैं।

   prepareRouteTransition(outlet) { 
       const animation = outlet.activatedRouteData['animation'] || {}; 
       return animation['value'] || null; 
   } 
   

3. आपके एनिमेशन (जैसे app.component.js) को परिभाषित करें:

   const slideLeft = [ 
       query(':leave', style({ position: 'absolute', left: 0, right: 0 ,transform: 'translate3d(0%,0,0)' }), {optional:true}), 
       query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(-100%,0,0)' }), {optional:true}), 
       group([ 
        query(':leave', group([ 
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(100%,0,0)' })), // y: '-100%' 
        ]), {optional:true}), 
        query(':enter', group([ 
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })), 
        ]), {optional:true}) 
       ]) 
       ] 
   
       const slideRight = [ 
       query(':leave', style({ position: 'absolute', left: 0, right: 0 , transform: 'translate3d(0%,0,0)'}), {optional:true}), 
       query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(100%,0,0)'}), {optional:true}), 
   
       group([ 
        query(':leave', group([ 
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(-100%,0,0)' })), // y: '-100%' 
        ]), {optional:true}), 
        query(':enter', group([ 
        animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })), 
        ]), {optional:true}) 
       ]) 
       ] 
   

4. अपने मार्ग परिभाषाओं को एनीमेशन मेटाडाटा जोड़ें (जैसे app.routing.ts):

   const routes: Routes = [ 
       { 
       path: 'products', 
       component: ProductsComponent, 
       data: { 
        animation: { 
        value: 'products', 
        } 
       } 
       }, 
       { 
       path: 'products/:id', 
       component: ProductDetailComponent, 
       data: { 
        animation: { 
        value: 'product-detail', 
        } 
       } 
       } 
   

5. अंत में, रजिस्टर एक ' आपके घटक पर राउटरएनीमेशन 'एनीमेशन ट्रिगर आपके द्वारा परिभाषित एनिमेशन और मार्ग मेटाडेटा के साथ ट्रिगर (उदाहरण के लिएapp.component.js):

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

मत भूलना पुराने ब्राउज़र

को लक्षित करने के

मटीस Niemela एनजी-conf पर यहाँ (एक डेमो के साथ) मार्ग एनिमेशन के बारे में अधिक बात करती है वेब एनीमेशन एपीआई polyfill के लिए: https://youtu.be/Oh9wj-1p2BM?t=12m21s

उनकी प्रस्तुति कोड: https://github.com/matsko/ng4-animations-preview

Answer 2

इसमें स्लाइडिंग के मामले में काफी सरल है।

आप Official Angular 2 Animate docs पर संदर्भ दे सकते हैं।

इस Plunker मैं एक साधारण सा प्रदर्शन के लिए किया था की जांच कर सकते हैं, नए रूटर v3

मन में भालू है कि मैं कैसे वास्तव में छुट्टी/बाहर निकलें/शून्य संक्रमण जब करने के लिए यह पता लगाने के लिए संघर्ष कर रहा हूँ का उपयोग कर ट्रिगर तत्व को देखने से नष्ट किया जा रहा है।

राउटर को एनीमेशन/संक्रमण समय के बारे में नोटिस लेने के तरीके को जानने के लिए मैंने Angular 2 Animate - No visible effect of the '* => void' transition when changing routes/components में एक और धागा खोला।

@Component({ 
    selector: 'home', 
    directives: [ROUTER_DIRECTIVES], 
    template: ` 
    <div @flyInOut="'active'" class="radibre"> 
    </div> 
    `, 
    styles: ['.radibre { width: 200px; height: 100px; background: red; }'], 
    animations: [ 
    trigger('flyInOut', [ 
     state('in', style({transform: 'translateX(0)'})), 
     transition('void => *', [ 
     style({transform: 'translateX(-100%)'}), 
     animate(100) 
     ]), 
     transition('* => void', [ 
     animate(100, style({transform: 'translateX(100%)'})) 
     ]) 
    ]) 
    ] 
}) 

export class Home { 
    constructor() { } 
} 

@Component({ 
    selector: 'page', 
    template: ` 
    <div @testingBottom="'active'" class="page"></div>`, 
    styles: ['.page { width: 300px; height: 50px; background: green; }'], 
    animations: [ 
    trigger('testingBottom', [ 
     state('active', style({transform: 'scale(1)'})), 
     transition('void => *', [ 
     style({transform: 'scale(0)'}), 
     animate(100) 
     ]), 
     transition('* => void', [ 
     animate(100, style({transform: 'scale(0)'})) 
     ]) 
    ]) 
    ] 
})