कोणीय एनिमेशन: शैली के बिना पृष्ठ संक्रमण 'स्थिति: पूर्ण`?

Question

उद्देश्य:

• Angular 2 — Animating Router transitions
• Page transition animations with Angular 2.0 router and component interface promises
: मैं जब एक पृष्ठ से एक और

---

लिए क्लिक मैं समाधान के बहुत सारे करने की कोशिश की ऑनलाइन, सहित एक अच्छा संक्रमण प्रभाव जोड़ना चाहते हैं

• ....

आम बात यह है कि उनके पास position: absolute या position: fixed जैसी शैली है, जो मेरे मौजूदा ऐप लेआउट को तोड़ती है।

मुझे याद है जब मैं कोणीय 1 का उपयोग कर, जोड़ने के लिए कोई आवश्यकता नहीं है position: absolute<div ui-view><div> को

यह कोणीय 2 या 4 में संभव है?

Answer 1

आप छोड़ने वाली एनीमेशन के लिए विशेष रूप से पूर्ण स्थिति जोड़ सकते हैं।

transition(':enter', [   
    style({transform: 'translateX(100%)'}),  
    animate('0.3s ease-in-out', style({transform: 'translateX(0%)'})) 
]), 
transition(':leave', [   
    style({transform: 'translateX(0%)', position: 'absolute', left: 0, right: 0, top: 0}),  
    animate('0.3s ease-in-out', style({transform: 'translateX(-100%)'})) 
]) 

तो केवल प्रस्थान मार्ग बिल्कुल स्थित है, जबकि प्रवेश मार्ग स्थिर रूप से स्थित है।

यह काम नहीं करता है, तो सुनिश्चित करें कि आपके राउटर-आउटलेट स्थिति से लपेटा जाता है सुनिश्चित करें: ब्लॉक

@Component({ 
    styles:[':host {display: block;}'] 

Answer 2

बारे में बात कर: रिश्तेदार

<div style="position: relative;"> 
    <router-outlet></router-outlet> 
</div> 

और अपने मार्ग-घटकों प्रदर्शन है कोणीय संस्करण 4.3.x. routerdocumentation पढ़ना, वे बताते हैं कि मार्गों के बीच एनीमेशन कैसे जोड़ें। यहां आलसी लोगों के लिए एक फिर से शुरू है (स्वयं सहित)। (

import { 
    AnimationEntryMetadata, 
    animate, 
    state, 
    style, 
    trigger 
} from '@angular/core'; 

export const fadeInAnimation: AnimationEntryMetadata = trigger('fadeInAnimation', [ 
    transition(':enter', [ 
    style({ 
     opacity: 0, 
     transform: 'translateY(20px)' 
    }), 
    animate(
     '.3s', 
     style({ 
     opacity: 1, 
     transform: 'translateY(0)' 
     }) 
    ) 
    ]) 
]); 

फिर अपने घटक में, HostBinding डेकोरेटर क्रम घटक के लेआउट सीएसएस गुण निर्दिष्ट करने के लिए का उपयोग आप उपयोग की जरूरत नहीं है:

आप से @angular/core (और नहीं @angular/animations) एनिमेशन पुस्तकालयों आयात करना चाहते हैं एक fixed या absolute स्थान):

import { Component, OnInit, HostBinding } from '@angular/core'; 

import { fadeInAnimation } from './../animations/fadein'; 

@Component({ 
    animations: [fadeInAnimation], 
    selector: 'app-posts', 
    templateUrl: './posts.component.html' 
}) 
export class DemandsComponent implements OnInit { 
    @HostBinding('@fadeInAnimation') fadeInAnimation = true; 
    @HostBinding('style.display') display = 'block'; 
    @HostBinding('style.position') position = 'relative'; 

    // Rest of the code 
} 

प्रत्येक कराई घटक को यह जोड़ा जा रहा है बोझिल हो सकता है। दस्तावेज सुझाव देते हैं, और मैं उद्धरण देता हूं:

व्यक्तिगत घटकों के लिए मार्ग एनिमेशन लागू करना एक साधारण डेमो के लिए काम करता है, लेकिन वास्तविक जीवन ऐप में, मार्ग पथों के आधार पर मार्गों को एनिमेट करना बेहतर होता है।

मटीस Niemelä से इस लेख में मदद कर सकते https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#routable-animations