CSS - 多个项目的轮播动画

Question

我创建了一个多项目轮播，我想给它添加滑动动画。
例如，点击右键，我希望显示的项目从右到左淡出，新项目也从右到左替换它们（但新项目将来自屏幕外）

我使用 CSS 网格来布局项目：
display: grid; grid-template-columns: repeat(4, 2.5rem); gap: 1rem;
我正在使用visibility: hidden 隐藏与显示的幻灯片无关的项目。

这是轮播的抽象示例 - https://jsfiddle.net/dehxzLn6/48/

如您所见，visibility: hidden 属性隐藏了元素，但它们仍然占用空间，所以这是我需要解决的另一个问题。

如果您能帮助我弄清楚如何将动画添加到这样的轮播中，我将非常高兴。
谢谢！

Answer 1

正如我之前回答的那样，“可见性：隐藏”元素会占用页面空间，因此您可以改用 display 属性。

其他选项是将项目“堆叠”到位。有几种方法，比如 position 属性，但你使用的是网格，所以你可以使用网格区域。

至于动画，你可以使用 opacity 属性进行过渡。并且要得到你想要的效果，可以根据位置添加延迟...

.items-wrapper {
  display: grid;
  grid-template-areas:
    "a b c d"
    "e f g h";
  gap: 1rem;
  margin: auto 0;

  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0px 4px 4px rgba(46, 37, 37, 0.15), 0px 0px 10px 1px rgba(203, 205, 208, 0.3);
    border-radius: 4px;
    padding: 0.5rem;
    height: 2.5rem;
    transition: opacity 0.8s calc(var(--delay) + var(--delayOffset, 0s));

    &.is-hidden {
      opacity: 0;
      --delayOffset: -0.8s;
    }

    &.pos0 { grid-area: a; --delay: 0.8s; }
    &.pos1 { grid-area: b; --delay: 0.9s; }
    &.pos2 { grid-area: c; --delay: 1.0s; }
    &.pos3 { grid-area: d; --delay: 1.1s; }
    &.pos4 { grid-area: e; --delay: 1.2s; }
    &.pos5 { grid-area: f; --delay: 1.3s; }
    &.pos6 { grid-area: g; --delay: 1.4s; }
    &.pos7 { grid-area: h; --delay: 1.5s; }
  }

这是一个简单的例子： https://jsfiddle.net/kbn1rw28/