Q:

efeito com transition css no Angular

Bom estou usando uma progress-bar sempre que estou carregando algum dado na página. 
Para ficar legal eu estou tentando colocar um efeito para quando ela aparecer e sumir.
Porém o efeito só funciona quando ele é ocultada, como faço para o efeito ser aplicado quando ele aparecer?
Class da progress-bar loader-overlay;
Class que oculta a progress-bar loader-hidden;
Código css:
.loader-hidden {
    position: absolute;
    width:100%;
    z-index: 500000;

    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.26s ease;

}
.loader-overlay {
    position: absolute;
    width:100%;
    z-index: 500000;

    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.26s ease;
}

Código html:
<div [class.loader-hidden]="!show">
    <div class="loader-overlay">
        <div>
            <md-progress-bar color="accent" mode="indeterminate"></md-progress-bar>
        </div>
    </div>
</div>

A:

O que ocorre é que a propriedade transition faz a animação de um estado anterior para o estado atual. Quando você adiciona a classe, o elemento meio que não tem um estado anterior, ele pode estar oculto com display: none, etc.
Neste caso, existem algumas abordagens para resolver esse problema, uma delas é a utilização de @keyframes, exemplo:

md-progress-bar {
  display: block;
  width: 300px;
  height: 10px;
  background: red;
}
.loader-hidden {
    position: absolute;
    width:100%;
    z-index: 500000;

    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.26s ease;

}
.loader-overlay {
    position: absolute;
    width:100%;
    z-index: 500000;
}
.loader-show {
    animation: hide 0.26s ease;
}
@keyframes hide {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  100% {
    transform: scaleY(1);
    transform-origin: top;
  }
}
<button onclick="document.getElementById('loader').className = 'loader-show'">Mostrar Loader</button>
<button onclick="document.getElementById('loader').className = 'loader-hidden'">Ocultar Loader</button>
<div id="loader">
    <div class="loader-overlay">
        <div>
            <md-progress-bar color="accent" mode="indeterminate"></md-progress-bar>
        </div>
    </div>
</div>

