角2 - アニメーショントランジションが効かない

2色のトランジションが必要OnClick。今、これは私のコードです：角2 - アニメーショントランジションが効かない

活字体

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>

これは、それが必要としてbackground-colorを変更しません。しかし、変更は移行の代わりに瞬間的です。

私はChromeの最新バージョンを使用しています。

出典

2017-02-10 FlorisdG

これは私にとって最も長い時間ですが、それは私の状態変数をブール型から文字列型に変更していたのです。したがって、trueとfalseを追跡する代わりに、'true'と'false'を追跡します。 Per Angular's docs：

アニメーション状態は、アプリケーションコードで定義する文字列値です。

はこれにあなたのMenubarComponentクラスを変更し

：

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

私はそれがダムだと思います。ブール値は、明らかにバイナリ状態の良いオプションです。

さらに詳しい情報：https://angular.io/guide/animations#states-and-transitions

出典

2017-04-10 15:51:10

-4

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>

出典

2017-02-10 10:47:58 Linushg111

いいえ、クリックする必要があります。そのため、WebアプリケーションのバックエンドでTypescriptを使用する必要があります – FlorisdG

角度2.Itにおけるルーティング/クリックもonClickのために働く間、私は、アニメーションを使用しています。すべてのタイプのルーティングにこのコードを使用します。別々のルート変更またはonclickのアニメーションを使用できます。

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

また、上記のコードを任意に変更することができます。

出典

2017-02-10 11:45:44

アーロン・クラウスが提供した答えに拡大。真偽値を直接解釈することに問題があります。ただし、文字列コンテキストを参照しない場合は、上記のtrueおよびfalseを数字1（true）および0（false）に置き換えることができます。これは私の問題を解決することを証明し、迷惑な文字列の解釈を必要としませんでした。

アーロン・クラウスと答えた上で、さらに拡大

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

出典

2017-05-04 21:17:45

：私は、文字列の中に私のブール値を変換したくないので、私はゲッターを定義し：アニメーションの定義で

public menuActive: boolean = false; 

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

そして（私は

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

かつ完全であることを、テンプレート：：彼らは同じであるため）遷移を合併

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

出典

2017-11-24 12:26:02

角2 - アニメーショントランジションが効かない

答えて

関連する問題