Error with classlist

I have the following function that initially works but then stops working what happens is that I take one class and leave me another

hidden=function(elemento){
if (elemento.classList.contains('hidden')) {
    elemento.classList.remove('displayNone');
    setTimeout(function() {
        elemento.classList.remove('hidden');
    }, 250);
} else {
    elemento.classList.add('hidden');
    elemento.addEventListener('transitionend',function () {
        elemento.classList.add('displayNone');
    });
}

Below is the css

.hidden {
    transition: 0.5s transform;
    transform: scale(0);
}

.displayNone {
    display: none;
}
.div-formulario{
        transition: 0.5s transform;}

Part of the php

echo '<div class="flexHorizontal"><a class="boton btn-grande" id="a-btnAgregarP"href="#div-formAgregar"><span class="icon-anadir"></span>agregar</a><a class="boton btn-grande" id="a-btnCambiarP" href="#div-formCambiar"><span class="icon-editar"></span>cambiar</a><a class="boton btn-grande" id="a-btnEliminarP" href="#div-formEliminar"><span class="icon-remover"></span>eliminar</a></div>';
        echo '<div class="div-formulario hidden displayNone"id="div-formAgregar">
        <h3 class="titulo-form">Agregar Productos</h2>
        <form name="formulario-login"  method="post" action="" enctype="multipart/form-data">
          <label for="input-nombrea_txt">Nombre
            <input type="text" id="input-nombrea_txt" name="input-nombrea_txt">
          </label>
          <label class="label-textarea" for="input-descripcion_txt">Descripcion
          <textarea id="input-descripcion_txt" name="input-descripcion_txt"></textarea>
          </label>
          <label for="input-precio_Num">Precio
            <input type="number" id="input-precio_num" name="input-precio_num">
          </label>
          <label for="input-categoria_txt">Categorias
          <select id="input-categoria_txt" name="input-categoria_txt">
            <option value="dulce">Dulce</option>
            <option value="salado">Salado</option>
            <option value="otro">Otro</option>
          </select>
          </label>
          <div class="div-fieldset">
          <button class="boton subirImg" type="button" >Cargar una imagen nueva</button>
          <button class="boton escogerImg" type="button" >Elegir una imagen subida</button>
          <label for="input-imagen_file" class="hidden">Imagen
          <input type="file" id="input-imagen_file" class="input-imagen_file" name="input-imagen_file" disable>
          </label>
          <label for="input-imagen_txt" class="hidden">NombreImagen
          <input type="text" id="input-imagen_txt" class="input-imagen_txt" name="input-imagen_txt" disable>
          </label> 
          </div>

          <button class="boton" type="submit" name="input-agregar">Agregar</button>
        </form>
      </div>';