각도 2 - 애니메이션 전환이 작동하지 않습니다.

2 색 사이의 전환이 필요합니다. OnClick. 이것은 background-color 예상대로 변경 않습니다각도 2 - 애니메이션 전환이 작동하지 않습니다.

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

타이프 라이터

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 : 지금이 내 코드입니다. 그러나 변경 사항은 전환이 아닌 일시적 변경 사항입니다.

Chrome 최신 버전을 사용하고 있습니다.

출처

2017-02-10 FlorisdG

이게 가장 긴 시간이었고, 내 상태 변수가 부울 유형에서 문자열 유형으로 바뀌 었습니다. 따라서 true 및 false을 추적하는 대신 'true' 및 'false'을 추적하십시오. 각도 별 워드 프로세서 당

애니메이션 상태는 응용 프로그램 코드에서 정의하는 문자열 값입니다.

이에 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는 : 라우팅하면서 각 2.It는 또한 온 클릭 작동에

<!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

아니요, 클릭해야합니다. 그러므로 나는 웹 애플리케이션의 백엔드에서 Typescript를 사용해야한다. – FlorisdG

내가 클릭/애니메이션을 사용했다. 모든 유형의 라우팅에이 코드를 사용하십시오. 별도의 경로 변경 또는 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' 
}

와 (I

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 - 애니메이션 전환이 작동하지 않습니다.

답변

관련 문제