effect with css Transition in Angular

Question

Well I’m using a Progress-bar whenever I’m loading some data on the page. To stay cool I’m trying to put an effect for when she shows up and disappears.

But the effect only works when it is hidden, as I do for the effect to be applied when it appears?

Class of the Progress-bar loader-overlay; Class that hides the Progress-bar loader-hidden;

Css code:

.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;
}

Html code:

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

Answer 1

What happens is that the property transition animates from a previous state to the current state. When you add the class, the middle element that does not have a previous state, it may be hidden with display: none, etc..

In this case, there are some approaches to solve this problem, one of them is the use of @keyframes, example:

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>