Angular 2 - przejście animacji nie działa

Potrzebuję przejścia między 2 kolorami OnClick. Teraz, to jest mój kod:Angular 2 - przejście animacji nie działa

Typescript

animations: [ 
    trigger('menubarState', [ 
     state('false', style({backgroundColor:'#43a047'})), 
     state('true', style({backgroundColor:'#333'})), 
     transition('false => true', animate('1s')), 
     transition('true => false', animate('1s')) 
    ]) 
] 

... 

export class MenubarComponent { 
    menuActive: boolean = false; 
    onMenuClick() { 
    if (this.menuActive == false) { 
     this.menuActive = true; 
    } else { 
     this.menuActive = false; 
    } 
    } 
}

HTML

<li [@menubarState]="menuActive" (click)="onMenuClick()"> 
     <a><span class="material-icons icon">apps</span></a> 
</li>

To nie zmienia background-color jak powinno. Zmiana jest jednak natychmiastowa zamiast przejścia.

Używam Chrome, najnowszej wersji.

Źródło

2017-02-10 FlorisdG

Trochę mnie to trwało najdłużej i naprawiłem zmienną stanu z typu boolowskiego na typ łańcucha. Dlatego zamiast śledzenia true i false śledzić 'true' i 'false'. Dokumentacja Per Angular:

Stan animacji to ciąg znaków zdefiniowany w kodzie aplikacji.

Zmień swoją klasę MenubarComponent do tego:

export class MenubarComponent { 
    menuActive: string = 'false'; 
    onMenuClick() { 
    if (this.menuActive === 'false') { 
     this.menuActive = 'true'; 
    } else { 
     this.menuActive = 'false'; 
    } 
    } 
}

Myślę, że to głupie. Booleans są oczywiście dobrymi opcjami dla stanów binarnych.

Więcej informacji: https://angular.io/guide/animations#states-and-transitions

Źródło

2017-04-10 15:51:10

-4

Nie możesz użyć CSS?

EX:

<!DOCTYPE html> 
<html> 
<head> 

    <style> 
    div { 
     background-color: #FF0; 
     height: 200px; 
     width: 100px; 
     animation: fontbulger 2s infinite; 
    } 

    @keyframes fontbulger { 
    0% { 
     background-color: blue; 
    } 
    50% { 
     background-color: red; 
    } 
    100% { 
     background-color: blue; 
    } 
    } 
    </style> 
    <title>test</title> 
</head> 
<body> 
    <div></div> 
</body> 
</html>

Źródło

2017-02-10 10:47:58 Linushg111

Nie, muszę to zrobić, klikając. Dlatego muszę używać Maszynopisów na zapleczu aplikacji internetowej – FlorisdG

Użyłem animację podczas trasowania/kliknięcie kątowe 2.It pracuje dla onClick również. Ten kod służy do wszystkich rodzajów routingu. Można użyć oddzielnej animacji do oddzielnej zmiany trasy lub kliknij.

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core'; 
export const slideInDownAnimation: AnimationEntryMetadata = 
    trigger('routeAnimation', [ 
    state('*', 
     style({ 
     opacity: 1, 
     backgroundColor:'#43a047', 
     transform: 'translateX(0)' 
     }) 
    ), 
    transition(':enter', [ 
     style({ 
     opacity: 0, 
     backgroundColor:'#333', 
     transform: 'translateX(-100%)' 
     }), 
     animate('0.2s ease-in') 
    ]), 
    transition(':leave', [ 
     animate('0.5s ease-out', style({ 
     opacity: 0, 
     backgroundColor:'red', 
     transform: 'translateY(100%)' 
     })) 
    ]) 
    ]);

Możesz również zmodyfikować powyższy kod zgodnie z własnym wyborem.

Źródło

2017-02-10 11:45:44

Rozwijając na odpowiedź, że Aaron Krauss usług. Ma problemy z bezpośrednią interpretacją wartości prawdziwych/fałszywych; Jeśli jednak wolisz nie odwoływać się do kontekstu łańcuchowego, możesz zastąpić prawdę i fałsz w powyższym z liczbami 1 (prawda) i 0 (fałsz). To okazało się naprawić mój problem i nie wymagało denerwujących interpretacji ciągów.

trigger('menubarState', [ 
    state('0', style({backgroundColor:'#43a047'})), 
    state('1', style({backgroundColor:'#333'})), 
    transition('0 => 1', animate('1s')), 
    transition('1 => 0', animate('1s')) 
])

Źródło

2017-05-04 21:17:45

Rozszerzenie jeszcze bardziej Aarona Krauss' odpowiedź: nie chcę, aby przekształcić swoje wartości logicznych do strun, więc zdefiniowany getter:

public menuActive: boolean = false; 

get menuState() { 
    return this.menuActive ? 'active' : 'inactive' 
}

a potem w swojej definicji animacji (I połączyły przejścia, ponieważ są takie same):

animations: [ 
    trigger('menubarState', [ 
    state('inactive', style({backgroundColor:'#43a047'})), 
    state('active', style({backgroundColor:'#333'})), 
    transition('inactive <=> active', animate('1s')) 
    ]) 
]

I być kompletny, szablon:

<li [@menubarState]="menuState" (click)="onMenuClick()"> 
    <a><span class="material-icons icon">apps</span></a> 
</li>

Źródło

2017-11-24 12:26:02

Angular 2 - przejście animacji nie działa

Odpowiedz

Powiązane problemy