如何使用CSS网格为JavaScript事件监听器设置动画

Question

我正在努力为HTML动画制作动画，理想情况下，我希望javascript使用.fadein或类似的东西而不是CSS处理动画。 PS对Java完全没有知识

我已经尝试过在css中对其进行动画处理，但是并没有采用

let strips = document.querySelector('.strips');
let strip  = document.querySelectorAll('.strip');

strip.forEach(function(theStrip){
    theStrip.addEventListener('mouseenter', function() {
        strip[0].classList.remove('hoverin').fadeIn(2000);
        theStrip.classList.add('hoverin').fadeOut(2000);
    });
    theStrip.addEventListener('mouseleave', function() {
        theStrip.classList.remove('hoverin').fadeIn(2000);
        strip[0].classList.add('hoverin').fadeOut(2000);
    });
});

<div class="strips">
    <div class="strip hoverin">
        <div class="plus"><h1>title</h1></div>
        <div class="content">
            <p>content</p>
        </div>
    </div>
    <div class="strip">
        <div class="plus"><h2>title</h2></div>
        <div class="content">
            <p>content</p>       
        </div>
    </div>
    <div class="strip">
        <div class="plus"><h3>Title</h3></div>
        <div class="content">
            <p>content</p>
        </div>
    </div>
    <div class="strip">
        <div class="plus"><h4>Title</h4></div>
        <div class="content">
            <p>content</p>
        </div>
    </div>
    <div class="strip">
        <div class="plus"><h5>title</h5></div>
        <div class="content">
            <p>content</p>
        </div>
    </div>
    <div class="strip">
        <div class="plus"><h6>Title</h6></div>
        <div class="content">
           <p>content</p>
        </div>
    </div>
</div>

理想情况下，我希望该栏在鼠标离开时能平滑关闭，在鼠标进入时能平滑打开