I have a webpage that features multiple buttons, each triggering a fade-in/fade-out animation when clicked. This animation also involves changing the contents of a specific div.
Though everything is functioning properly, there is a brief moment (about half a second) where the div disappears before the fade-in animation begins, which detracts from the overall appearance. Is there a way to ensure the div remains invisible and then visible again without any changes in height? Setting the height to 100% did not resolve this issue.
CSS
.afterClick {
-webkit-animation: fadeinout 0.6s linear forwards !important;
animation: fadeinout 0.6s linear forwards !important;
}
@keyframes fadeinout {
from {
opacity: 1;
animation-timing-function: ease;
}
50% {
opacity: 0.5;
animation-timing-function: ease-in;
}
to {
opacity: 1;
animation-timing-function: ease-in-out;
}
}
HTML
<a href="#" class="some-class" (click)="setAnimation()">
<div class="afterClick" *ngIf="checkVisibility == 'Y'">
some contents
</div>
TS
public checkVisibility = 'Y';
setAnimation() {
let context = this;
context.checkVisibility = 'N';
setTimeout(function() {
context.checkVisibility = 'Y';
}, 50);
}