3

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>

1 Resposta 1

3

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>

1
  • Muito bom, obrigado. 24/08/2017 às 15:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .