Возможно ли добавить плавной в данной ситуации?

Свойство display неанимируемо.

Но необходимого вам эффекта можно добиться при помощи изменения свойства visibility (тоже неанимируемо) и opacity, которое анимировать можно.

Пример:

var t = document.querySelector(".box"); 
 
setInterval(() => { 
    t.classList.toggle("active"); 
}, 1000);

.box { 
    transition: opacity 1s linear; 
    padding: 1rem; 
     
    visibility: hidden; 
    opacity: 0; 
     
    background-color: red; 
} 
 
.box.active { 
    visibility: visible; 
    opacity: 1; 
}

<div class="box">Block</div>

Попробуй поиграться высотой:

.item .submenu {
    height: 0;
    overflow: hidden;
    transition: 0.4s all;
}
.item.active .submenu {
    height: auto;
}

Либо на jQuery можно повесить событие на click

$("item").on('click', function() {
    $(this).find('.submenu').slideToggle();
})