javascript - 如何使用 css 网格为 javascript 事件侦听器设置动画

Question

我正在努力为某段 HTML 制作动画，理想情况下，我希望 javascript 使用 .fadein 或类似的东西而不是 css 来处理动画。PS 完整的菜鸟到 Javascript

我试过在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>

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

标签： javascripthtmlcss