Angular 2 - Animation Übergang funktioniert nicht

Ich brauche einen Übergang zwischen 2 Farben . Gerade jetzt, das ist mein Code:Angular 2 - Animation Übergang funktioniert nicht

Typoskript

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>

Das die background-color ändert, wie es sollte. Die Änderung ist jedoch sofort statt eines Übergangs.

Ich verwende die neueste Version von Chrome.

Quelle

2017-02-10 FlorisdG

Das hat mich am längsten gebissen, und was es behoben hat, war meine Statusvariable von einem booleschen Typ in einen String-Typ zu ändern. Also - anstatt true und false zu verfolgen, track 'true' und 'false'. Per Angulars Dokumentation:

Ein Animationsstatus ist ein Zeichenfolgenwert, den Sie in Ihrem Anwendungscode definieren.

ändern MenubarComponent Klasse dazu:

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

Ich denke, es dumm ist. Booleans sind offensichtlich gute Optionen für binäre Zustände.

Weitere Informationen: https://angular.io/guide/animations#states-and-transitions

Quelle

2017-04-10 15:51:10

-4

Können Sie CSS nicht verwenden?

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>

Quelle

2017-02-10 10:47:58 Linushg111

Nein, ich muss es auf klicken klicken. Dazu muss ich Typescript im Backend der Web-Anwendung verwenden – FlorisdG

Ich habe Animation verwendet, während das Routing/Klick in Winkel 2.It für onClick funktioniert auch. Verwenden Sie diesen Code für alle Arten von Routing, Sie können separate Animation für separate Routenänderung oder onclick verwenden.

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

Sie können den obigen Code auch entsprechend Ihrer Wahl ändern.

Quelle

2017-02-10 11:45:44

auf die Antwort erweitern, dass Aaron Krauss zur Verfügung gestellt. Es gibt Probleme mit der direkten Interpretation der Wahr/Falsch-Werte; Wenn Sie jedoch nicht auf einen Zeichenfolgenkontext verweisen möchten, können Sie true und false im obigen Text durch die Zahlen 1 (wahr) und 0 (falsch) ersetzen. Dies löste mein Problem und erforderte keine störenden Stringinterpretationen.

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

Quelle

2017-05-04 21:17:45

Erweiterung noch mehr auf Aaron Krauss' Antwort: Ich will nicht meine booleans in Strings verwandeln, so definiert ich einen Getter:

public menuActive: boolean = false; 

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

Und dann in der Animation Definition (I die Übergänge zusammengefasst, da sie die gleichen sind):

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

und vollständig zu sein, die Vorlage:

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

Quelle

2017-11-24 12:26:02

Angular 2 - Animation Übergang funktioniert nicht

Antwort

Verwandte Themen