How to toggle display:none/display:block whilst first animating/transitioning

Question

Similar questions have been asked here in various forms of complexity. Some using jQuery:

How to toggle animate with css display:none.

And some very specific ones that over look the scope and simplicity of what is trying to be achieved:

JavaScript - add transition between display:none and display:block.

But take this very stripped down code for example:

var button = document.getElementsByTagName( 'button' )[ 0 ],
    div = document.getElementsByTagName( 'div' )[ 0 ];

button.addEventListener( 'click', toggleVisibility );

function toggleVisibility(){
  if( 
    div.classList.contains( 'show' ) 
   ){
    div.classList.remove( 'show' );
    div.classList.add( 'hide' );
  }
  else {
    div.classList.add( 'show' );
    div.classList.remove( 'hide' );
  }
}

div {
  height: 100px;
  width: 100px;
  background: #000;
  transition: 1s;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

<p>A square</p>

<div class="show"></div>

<br>

<button>click to toggle hide/show</button>

This successfully toggles the opacity. But as soon as I add display: none to the .hide class the effect breaks horribly:

var button = document.getElementsByTagName( 'button' )[ 0 ],
    div = document.getElementsByTagName( 'div' )[ 0 ];

button.addEventListener( 'click', toggleVisibility );

function toggleVisibility(){
  if( 
    div.classList.contains( 'show' ) 
   ){
    div.classList.remove( 'show' );
    div.classList.add( 'hide' );
  }
  else {
    div.classList.add( 'show' );
    div.classList.remove( 'hide' );
  }
}

div {
  height: 100px;
  width: 100px;
  background: #000;
  transition: 1s;
}

.hide {
  display: none; /* added "display:none" in this example */
  opacity: 0;
}

.show {
  opacity: 1;
}

<p>A square</p>

<div class="show"></div>

<br>

<button>click to toggle hide/show</button>

What is a simple, reusable solution that we can use without any plugins or libraries to first fade out, then turn off display and first turn on display then fade in?

Edit: I am using display over visibility because in this example as in most cases I use this effect I want the element completly removed as it is usually on top of other elements hindering mouseover/click effects.

Answer 1

Add an event listener on transitionend to change the display property; it cannot transition as it just changes elements from mode to the other. So if you want to change display, do it before/after the transition begins.

var button = document.getElementsByTagName( 'button' )[ 0 ],
    div = document.getElementsByTagName( 'div' )[ 0 ];

button.addEventListener('click', toggleVisibility)
div.addEventListener('transitionend', function() {
    if (this.classList.contains('hide')) {
        this.style.display = 'none'
    }
})

function toggleVisibility(){
    if (div.classList.contains( 'show' )) {
        div.classList.remove( 'show' );
        div.classList.add( 'hide' );
    }
    else {
        div.style.display = 'block'
        div.classList.add( 'show' );
        div.classList.remove( 'hide' );
    }
}




div {
  height: 100px;
  width: 100px;
  background: #000;
  transition: 1s;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

EDIT: This doesn't work very well on the transition from hide => show, I've just realized. Another possible solution that would fix your issues with visibility is, not only change the visibility property, but also when it's hidden, just add a z-index: -10, or something like that (maybe not so ridiculous of a number). That was it stays out of the way as far as your layering is concerned, and it won't affect the transitions. (This might not work well if you need the element to be removed from the layout, but that hasn't been clarified.)

Answer 2

setvisibilty instead of display,and if you want to set sync you could set transition attribute to all(transition:all 1s).

code

div {
  height: 100px;
  width: 100px;
  background: #000;
  transition: visibility 0s, opacity 0.5s linear;
}

.hide {
  visibility: hidden;
  opacity: 0;
}

.show {
  visibility: visible;
  opacity: 1;
}

Answer 3

Adding pointer-events to your .hide class should do the trick.

.hide {
  pointer-events: none;
  opacity: 0;
}