JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-wrapper">
    <button class='btn btn-danger forum-select-button'>5</button>
    <div class="metric-number">5</div>
</div>
<button class='swap-info'>Swap Info</button>

CSS

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-o-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.forum-select-button {
    display: none;
}
.metric-number, .forum-select-button {
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}
.show {
    display: inline-block;
    -webkit-animation: fade-in 1s;
    -moz-animation: fade-in 1s;
    -o-animation: fade-in 1s;
    animation: fade-in 1s;
    -webkit-animation-mode: forwards;
    -moz-animation-mode: forwards;
    -o-animation-mode: forwards;
    animation-mode: forwards;
}

JavaScript

$('.swap-info').on('click', function () {
    $('.metric-number').css('opacity', '0').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
        $(this).css('display', 'none');
        $('.forum-select-button').addClass('show');
    });
});