Transition Problems when tied with Google Maps Native

Hi, my ngClass works perfectly when I press a button to add a class to a div which then triggers a transition.

However, when I use the MAP_CLICK function on the Native Google Map plugin, the function gets called but the transition never happens.

I noticed if I minimize the app on my device and open it again then the transition will take place. The button works every time but using the map does not work!

.scss

.hideBarHome
{
bottom: calc(-2 * 90/640 * 100vw);
-webkit-transition: ease-out 1s;
-moz-transition: ease-out 1s;
-o-transition: ease-out 1s;
transition: ease-out 1s;
}

.html

<button ion-fixed id=“bottomBarHome” (click)=“highlightsFromHome()” [ngClass]=“showBar ? ‘showBarHome’:‘hideBarHome’”>

.ts

this.map.on(GoogleMapsEvent.MAP_CLICK)
.subscribe(() => {
this.toggleShow();
});
toggleShow()
{
this.showBar = this.showBar ? false : true;
}

Are there any ideas what may cause this? Thanks!