Animation Problem

by Grigory Morozov

HTML

<button class="show">show</button>
<button class="alt-show">alt-show</button>
<button class="hide">hide</button>
<div class="block"></div>

CSS

.block {
  display: none;

  width: 100px;
  height: 100px;

  background-color: #000;

  opacity: 0;
  transition: opacity .2s linear;
}

.block_show {
  opacity: 1;
}

JavaScript

let $block = $('.block');

$('.show').click(function() {
	$block.css('display', 'block')
        .addClass('block_show');
});

$('.alt-show').click(function() {
	$block.css('display', 'block');
  
  setTimeout(() => {
  	$block.addClass('block_show');
  }, 0);
});

$('.hide').click(function() {
	$block.removeClass('block_show');
  
  $block.one('transitionend', function() {
  	$block.css('display', 'none');
  });
});