JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child">
  
  </div>
</div>

SCSS

.parent {
  position:relative;
  width:250px;
  height:250px;
  background:#000;
  border-radius:250px;
  overflow:hidden;
}

.child {
  opacity:0;
  transition:1s opacity ease-in-out;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:blue;
  width:250px;
  height:250px;
  
  &.active {
    opacity:1;
  }
}

JavaScript

$('.child').addClass('active');