Let's say I have an element with:

.element{
/* some css prorieties */
    transition-duration:1.5s;
    transition-delay:.1s;
}

Now, triggering it by hovering over another element, I want it to come in with this duration and delay, but go out (not hovering anymore) a little faster.

Now let bigobj=the object I hover over

and

let smallobj=the object that transitions (.element)

My JS looks like this:

bigobj.addEventListener('mouseleave',function(){
       smallobj.style.transitionDuration=.3;
       smallobj.style.transitionDelay=.3;
});

It doesn't work.

If I change it to:

smallobj.style.transition="none";

it works as intended.

What would be a fix?