Angular 2+ Animation- Изменение цвета элемента тела

Question

Я начинающий программист, и недавно я начал изучать Angular 4. Я пытаюсь создать личный сайт и хочу добавить анимацию.

В верхней части страницы у меня есть jumbotron с логотипом. Я хочу, чтобы при нажатии на этот логотип менялся цвет фона тела, но похоже, что функция запускает элемент.

Вот мой код на TypeScript: (Код не выдает ошибку. Он просто не делает то, что я намеревался сделать.)

@Component({
    selector: 'main-jumbotron',
    templateUrl: './jumbotron.component.html',
    styleUrls: ['./jumbotron.component.css'],
    animations: [
      trigger("changeBodyColor", [
        state('off', style({
            backgroundColor: '#CCFFCC'
        })),
        state('on', style({
            backgroundColor: '#3A3A38'
        })),
        transition('off => on', [animate('2s')]),
        transition('on => off', [animate('2s')])
      ])
    ]
})
export class JumbotronComponent implements OnInit {
     // other private instance data, constructor here, ngOnInit etc.

    colorState: string = 'off';
        toggleColor() {
            console.log('triggered ' + this.colorState);
            this.colorState = (this.colorState === 'off') ? 'on' : 'off';
    }
}

Когда я помещаю [@changeBodyColor]="colorState" в элемент div элемента jumbotron, анимация работает, но, очевидно, просто меняя цвет фона jumbotron. Когда я помещаю это в элемент body из index.html, функция срабатывает (входит в консоль), но цвет не меняется.

Я чувствую, что это проблема иерархии DOM. Если у кого-то есть представление о том, в чем проблема, пожалуйста, дайте мне знать!

Answer 1

Это может быть проблемой:

transition('off => on', [animate('2s')]),
transition('on => off', [animate('2s')])

попробуйте без скобок для параметра анимации.

transition('off => on', animate('500ms')),
transition('on => off ', animate('500ms'))

Работает для меня.

Answer 2

Если вы хотите изменить все тело, напишите анимацию: в компоненте, который определяет ваше тело. он не изменит ваш jumbotron или нижний колонтитул, поэтому вы можете создать div со свойствами, охватывающими весь экран, а затем применить свой триггер там [@changeBodyColor].