Проблема с одновременным выполнением двух анимаций - угловая 6

Question

Я построил директиву «диалоговое окно» в угловом формате и хочу открыть поля с эффектом анимации «увеличение», я также хочу анимировать opacity фона. Я назначаю классы CSS-анимации моим элементам из «модальной директивы». У меня странная проблема, которую я не могу понять.

Когда модальная коробка открывается, все работает, как и должно быть, модальное масштабирование и фон opacity меняется одновременно. Проблема в том, что когда я хочу закрыть модал, проблема в том, что я не могу анимировать прозрачность фона, пока работает масштабная анимация. при удалении scale анимации opacity анимируется.

Есть ли другой способ изменить непрозрачность фона?

Вот CSS:

    @import 'vars.scss';

    auth-modal {

        display: none;

        .auth-modal {
            position: fixed;       
            z-index: 100000;   
            box-shadow: $box-shadow;     
            left: 30%;
            top: 10%;
            animation-name: zoomForm;
            animation-duration: .8s;   
            opacity: 1;
        }

    }

    .hide-background {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color:  $color-dark-1;   
        opacity: 0.85;  
        animation-name: backgroundAnimation;
        animation-duration: .8s;   
        z-index: 900;   


    }  

    .close-auth-modal {
        transform: scale(0);
        -webkit-transition: all 0.8s ease-in-out; 
        transition: all 0.8s ease-in-out; 
    }


    .show-background {
        position: fixed;
        top: 0;
        z-index: 900;   
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;  
        -webkit-transition: all .8s ease-in-out; 
        transition: all .8s ease-in-out; 
    }


    body.auth-modal-open {
        overflow: hidden; 
    }

@keyframes zoomForm {
    from {
        opacity:0;
        transform: scale(0.1);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes backgroundAnimation {
    from {
        opacity:0;        
    }
    to {
        opacity: 0.85;
    }
}

и функция закрытия и открытия в директиве:

import { Component, ElementRef, Input, OnInit, OnDestroy, HostBinding, Renderer } from '@angular/core';
import { AlertModalService } from '../../../alert-modal/alert-modal.service';


@Component({
    selector: 'auth-modal',
    template:`<div><ng-content></ng-content></div>
      <div [ngClass]="{'hide-background' : hideBackground, 'show-background': !hideBackground}"></div>`
})

export class AuthModalDirective implements OnInit, OnDestroy {
    @Input() id: string;
    private element: any;
    private hideBackground: boolean;

    constructor(private renderer: Renderer, private modalService: AlertModalService, private el: ElementRef) {
        this.element = el.nativeElement;
    }

    ngOnInit(): void {
        let modal = this;
        if (!this.id) {
            console.error('modal must have an id');
            return;
        }

        document.body.appendChild(this.element);


        this.element.addEventListener('click', function (e: any) {
            if (e.target.className === 'auth-modal') {
                modal.close();
            }
        });

        this.modalService.add(this);
    }

    ngOnDestroy(): void {

        this.modalService.remove(this.id);
        this.element.remove();
    }

    // open modal
    open(): void {

        this.hideBackground = true;
        this.element.style.display = 'block';
        document.body.classList.add('auth-modal-open');
    }

    // close modal
    close(): void {
        this.hideBackground = false;
        this.renderer.setElementClass(this.element, 'close-auth-modal', true)

        setTimeout(() => {

            this.element.style.display = 'none';
            this.renderer.setElementClass(this.element, 'close-auth-modal', false)
            document.body.classList.remove('auth-modal-open');
          }, 800);
    }
}