How in angular 2+, dynamically manage the addition of animations (:enter and :leave) under certain conditions?

Question

I'm working on an animation for :enter and :leave from the pages.

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';

export const slideInDownAnimation: AnimationEntryMetadata = trigger('routeAnimation', [
    state('*',
        style({
            transform: 'translateY(0)'
        })
    ),
    transition(':enter', [
        style({
            transform: 'translateY(100%)'
        }),
        animate('.5s linear')
    ]),
    transition(':leave', [
        animate('.5s linear', style({
            transform: 'translateY(-100%)'
        }))
    ])
]);

In components:

import { slideInDownAnimation } from './../route-animation/animations';
import { Component, OnInit, HostBinding } from '@angular/core';

@Component({
  selector: 'app-building',
  templateUrl: './building.component.html',
  styleUrls: ['./building.component.scss'],
  animations: [
    slideInDownAnimation
  ]
})
export class BuildingComponent implements OnInit {

  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'absolute';

  constructor() { }

  ngOnInit() {
  }
}

And this animation is reused in several components.

In each of these components there is a button to go to the next page with the same animation.

I need to create common conditions for these components with animation, so that the animation works only when these buttons are pressed. Can with the help of some kind of common service.

This animation works every time you go to animation pages, and I just need the animation to work only when these buttons are clicked.