JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="one hidden"></div>
<div class="two"></div>

<button id="change">Кнопка </button>

CSS

.one {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 2s linear;
}

.two {
  width: 100px;
  height: 100px;
  background-color: green;
  transition: all 2s linear 2s;
}

.hidden {
  opacity: 0;
  transition: all 2s linear;
}

JavaScript

$('#change').click(function() {
                   $('.two').addClass('hidden');
                   $('.one').removeClass('hidden');
        });