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

Question

我使用 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>

我的 CSS：

.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;
}

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

Answer 1

您应该尝试将 animation 与 @keyframes 一起使用，因为这样每次元素从隐藏到显示时都会根据需要制作动画。

试试这个：

const images = document.querySelector(".container > .img-holder-1 ");

document.querySelector("#back").addEventListener('click', function() { images.classList.toggle('displayed'); });

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

.container > div {
    display: none;
}

.container > .displayed{
    display: grid;
    grid-auto-columns: 1fr 1fr 1fr;
    opacity:0;
    animation:fade-in 1s forwards;
}

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

@keyframes fade-in{
  from{
    opacity: 0;
  }
  to{
    opacity:1;
  }
}

<div class="imgs">
        <button id="back">Toggle Class</button>
        <div class="container">
            <div class="img-holder-1 displayed">
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
            </div>
            <div class="img-holder-1">
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" />
                <img src="https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png" alt="#" /> 
            </div>
        </div>
    </div>

点击“Toggle Class”查看淡入效果。