html - Angular 2+ Animación - Cambiar color en el elemento body

Soy un programador principiante y recientemente comencé a aprender Angular 4. Estoy tratando de hacer un sitio personal y quiero agregar algunas animaciones.

En la parte superior de la página, tengo un jumbotron con un logo. Quiero que cuando haga clic en este logo, el color de fondo del cuerpo cambie, pero parece que la función activa el elemento.

Aquí está mi código en TypeScript: (El código no produce un error. Simplemente no hace lo que yo pretendía que hiciera.)

@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';
    }
}

Cuando pongo [@changeBodyColor]="colorState" en el elemento div del jumbotron, la animación funciona, pero solo cambia el color de fondo del jumbotron, obviamente. Cuando pongo esto en el elemento body de index.html, la función se activa (registrada en la consola), pero el color no cambia.

Siento que este es un problema con la jerarquía del DOM. ¡Si alguien tiene alguna idea de cuál podría ser el problema, por favor háganmelo saber!

Respuesta #1

esto podría ser el problema:

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

intenta sin corchetes para el parámetro animate.

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

Funciona para mí.

Respuesta #2

Si quieres cambiar todo el cuerpo, entonces escribe las animaciones: en el componente que define tu cuerpo. no cambiará tu jumbotron o pie de página, así que lo que puedes hacer es hacer un div con propiedades que cubran toda la pantalla, y luego aplicar tu disparador allí [@changeBodyColor].