effect with transition css in the Angular

Question

effect with transition css in the Angular

Navigation

#1 by (3 votes)

3

Well I'm using a progress bar whenever I'm loading some data on the page. To be cool I'm trying to put an effect on when it pops up.

But the effect only works when it is hidden, how do I apply it when it appears?

Progress bar class loader-overlay ; Class that hides 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>

html css angular

asked by anonymous 24.08.2017 / 15:31

1 answer

Is web service hosting the same as a site with pages? How to ignore files according to their extension in TFS?

score 3 · Accepted Answer

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

In this case, there are some approaches to solving this problem, one of which is the use of @keyframes , eg

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>