Javascript 如何在显示时将动画应用于元素？

Im使用div包含3组图像。我有一个后退按钮和一个下一步按钮，用户可以用它在图像之间导航

我的HTML：

<div class="imgs">
        <button>Back</button>
        <div class="conatiner">
            <div class="img-holder-1">
                <img src="#" alt="#" />
                <img src="#" alt="#" />
                <img src="#" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="#" alt="#" />
                <img src="#" alt="#" />
                <img src="#" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="#" alt="#" />
                <img src="#" alt="#" />
                <img src="#" alt="#" /> 
            </div>
        </div>
        <button>Next</button>
    </div>

它的工作方式是，我有一些JavaScript，将.display类广告到显示的图像集。我想实现的是，当类发生变化时，一个div淡出，另一个淡入，这样会更平滑。有没有办法用CSS动画做到这一点？或者我应该如何实现这个结果？

您应该尝试使用带有@keyframes的动画，因为这样，每当元素从隐藏变为显示时，都会根据需要制作动画

尝试以下方法：

const images=document.querySelector.container>.img-holder-1； document.querySelectorback.addEventListener'click'，函数{images.classList.toggle'displated'；}； .imgs{ 显示：网格； 网格模板柱：1fr 1fr 1fr； } .container>div{ 显示：无； } .container>已显示{ 显示：网格； 网格自动列：1fr 1fr 1fr； 不透明度：0； 动画：以1s向前淡入； } .container>.displated>img{ 宽度：40px； 高度：40px； 边框：2倍纯红； } @关键帧淡入{ 从{ 不透明度：0； } 到{ 不透明度：1； } } 切换类

---

请试着提供一把小提琴，这样我们就能更好地理解你想要什么。。。可能与我应该提供的内容重复？@BudaÖrs代码是react项目的一个示例。谢谢！我只剩下一个问题了。如何使另一组图像淡出你能帮帮我吗？

.imgs{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.container > div {
    display: none;
}

.container > .displayed{
    display: grid;
    grid-auto-columns: 1fr 1fr 1fr;
}

.container > .displayed > img{
    width: 40px;
    height: 40px;
    border: 2px solid red;
}