2

I am trying to just use vanilla javascript instead of jQuery and to fade an element out I am using css and js.

My css:

.fade-out {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}

The js:

        const approveBox = document.querySelector('.dashboard-list-box');
        approveBox.classList.add('fade-out');

This works but the problem is that it leaves a gaping hole in the page when the element fades out instead of shifting the content below upwards like it would with using jQuery fadeOut().

If I replace visibility: hidden with

display: none

Then it just disappears instantly without fading. Is there a way around this?

user8463989
  • 2,275
  • 4
  • 20
  • 48
  • make the height 0 after your animation done. Or put height:0 in your css fade-out class – Mustkeem K Jan 06 '19 at 11:38
  • 1
    @MustKeemJ, thanks for this. The problem is that the height becomes 0 before the transition is complete and that doesn't look so good – user8463989 Jan 06 '19 at 11:46

0 Answers0