Animacja kątowa: Przejście strony bez stylu `position: absolute`?

Cel: Chcę dodać przyjemny efekt przejściowy, gdy kliknięcie z jednej strony na drugąAnimacja kątowa: Przejście strony bez stylu `position: absolute`?

Próbowałem wiele rozwiązania on-line, w tym:

Jedną rzeczą wspólną jest to, że wszystkie mają styl taki jak position: absolute lub position: fixed, co powoduje zerwanie mojego istniejącego układu aplikacji.

Pamiętam, kiedy za pomocą kątowa 1, nie ma potrzeby, aby dodać position: absolute do <div ui-view><div>

Czy jest możliwe w Kątowymi 2 lub 4?

Źródło

2017-02-07 Alex G

udało ci się znaleźć rozwiązanie tego problemu? –

Potrzebujesz pozycji absolutnej/ustalonej w inny sposób, gdy pojawi się drugi ekran, który znajduje się jeden obok drugiego.Podczas gdy potrzebujesz ich, aby zasłaniać się nawzajem tymi samymi współrzędnymi. W moim przypadku przepisałem CSS mojej aplikacji internetowej, aby umożliwić absolutnie pozycjonowane trasy bez łamania układu. –

Na dzień dzisiejszy również walczę z tym. Fakt, że wydaje się, że musimy dodać "position: fixed" lub "position: absolute", wydaje mi się naprawdę głupi i nie jest wcale mądry. Naprawdę mam nadzieję, że zespół Angular jest lepszy. Musi być inny sposób. Mój komentarz wcale nie pomaga, przepraszam. Spróbuję coś znaleźć i zamieścić tutaj, jeśli nikt tego nie zrobi, zanim to zrobię. – lkartono

Możesz dodać pozycjonowanie bezwzględne wyłącznie do animacji zakończenia.

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%)'})) 
])

Tak więc tylko trasa przejścia jest ustawiona absolutnie, podczas gdy trasa wejścia jest ustawiona statycznie.

Jeśli to nie działa, upewnij się, że router-wylot jest owinięty przez position: relative

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

i że Route-komponenty mają display: block

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

Źródło

2017-05-14 12:45:37

mówimy o Wersja kątowa 4.3.x. Czytając routerdocumentation, wyjaśniają, jak dodawać animacje między trasami. Oto życiorys dla leniwych (w tym ja).

chcesz zaimportować biblioteki animacje @angular/core (a nie @angular/animations):

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)' 
     }) 
    ) 
    ]) 
]);

Następnie w składniku, użyj HostBinding dekorator w celu określenia układu właściwości CSS komponentu (nie potrzeba wykorzystania fixed lub absolute stanowisko)

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 
}

Dodawanie to każdy kierowane składnik może być kłopotliwe. Dokumentacja sugeruje, a ja cytuję:

Stosowanie animacji trasy do poszczególnych komponentów działa na proste demo, ale w prawdziwej aplikacji lepiej jest animować trasy na podstawie ścieżek trasy.

Ten artykuł od Matias Niemelä może pomóc https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#routable-animations

Źródło

2017-07-31 12:02:48 lkartono

Animacja kątowa: Przejście strony bez stylu `position: absolute`?

Odpowiedz

Powiązane problemy