Angular 2+ Animation- Changing color on body element

Question

I am a beginner programmer, and I recently started to learn Angular 4. I am trying to make a personal site and want to add some animations.

On the top of the page, I have a jumbotron with a logo. I want it so that so that when I click on this logo, the background color of the body changes, but it seems that the function trigger the element.

Here is my code on TypeScript: (Code doesn't produce an error. It just doesn't do what I intended to do.)

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

When I put [@changeBodyColor]="colorState" in the div element of the jumbotron, animation works, but just changing the jumbotron background color, obviously. When I put this on the body element from index.html, the function is triggered (logged on console), but the color does not change.

I feel like this is a problem with the DOM hierarchy. If anyone has some idea of what the issue might be, please let me know!

Answer 1

this could be the problem:

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

try without brackets for animate parameter.

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

Works for me.

Answer 2

If you want to change the whole body, then write the animations: in the component which defines your body. it wont change your jumbotron or footer so what you can do is make div with properties covering the whole screen, and then apply your trigger there [@changeBodyColor].