Угловой 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

Нет, я должен сделать это по щелчку. Поэтому я должен использовать машинописный ввод в конце веб-приложения – 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

Развивая ответ, что Аарон Krauss условия. У него возникают проблемы с прямой интерпретацией истинных/ложных значений; однако, если вы предпочитаете не ссылаться на строковый контекст, вы можете заменить 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

Расширение еще на ответ Аарон Krauss': Я не хочу, чтобы преобразовать мои булевы в строки, поэтому я определил поглотитель:

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 - переход на анимацию не работает

ответ

Смежные вопросы