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

正如我之前回答的，“可见性：隐藏”元素占用页面上的空间，因此您可以使用显示属性。

另一种选择是将物品“堆叠”到位。有几种方法可以实现，例如位置属性，但您使用的是网格，因此可以使用网格区域。

至于动画，您可以使用不透明度属性并对其进行过渡。并且为了得到你想要的效果，你可以根据位置添加延迟......

.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/