JSFiddle - React, Tailwind, and code Playground

HTML

<a herf="#" id="mudar">Mudar Campo</a>

<div class="alternativos">
    <input type "text" name="nome" />
    <select name="nome" disabled="true">
        <option value="">Escolha 1</option>
    </select>
</div>

CSS

div.alternativos {
    margin-top: 20px;
    position: relative;
}
div.alternativos select {
    opacity: 0;
    visibility: hidden;
}

div.alternativos select, div.alternativos input{
    position: absolute;
    left: 0px;
    transition: opacity 2s;
}

#mudar {
    cursor: pointer;
    padding: 10px;
    transition: background-color .8s;
}
#mudar:hover {
    background-color: #ccf;
}

JavaScript

document.getElementById('mudar').addEventListener('click', substituir);

function substituir(e) {
    var input = document.querySelector('.alternativos input');
    var select = document.querySelector('.alternativos select');

    mudarEstado(input, !select.disabled);
    mudarEstado(select, select.disabled);
}

function mudarEstado(el, mostrar) {
    el.style.opacity = mostrar ? 1 : 0;
    
    if (mostrar) el.removeAttribute('disabled');
    else el.setAttribute('disabled', true);

    if (mostrar) el.style.visibility = 'visible';
    else setTimeout(function(){ el.style.visibility = 'hidden';}, 1000);
  
}