如何知道“translateX”动画中的最大“宽度”？

Question

我只想创建类似于轮播的东西。 （轮播仅适用于桌面）。

<div class="wrapper">
<div class="image-container">
  <img alt="Siac" src="https://diey.now.sh/Icons/Clients/SIAC_LOGO.svg">
  <img alt="Change" src="https://diey.now.sh/Icons/Clients/CHANGE_LOGO.svg">
  <img alt="HF" src="https://diey.now.sh/Icons/Clients/H_F_Logo.svg">
  <img alt="VDM" src="https://diey.now.sh/Icons/Clients/VDM_Logo.svg">
  <img alt="Reviu" src="https://diey.now.sh/Icons/Clients/Reviu_Logo.svg">
  <img alt="Total Capital" src="https://diey.now.sh/Icons/Clients/Total_Capital_Logo.svg">
  <img alt="AdelantaT" src="https://diey.now.sh/Icons/Clients/AdelantaT_Logo.svg">
  <img alt="Ayssa" src="https://diey.now.sh/Icons/Clients/Ayssa_Logo.svg">
  <img alt="Carga Logística" src="https://diey.now.sh/Icons/Clients/Carga_Logistica_Logo.svg">
</div>
</div>

/* These padding is here because the real page use them */
.wrapper {
  padding: 0 2.5em;

  @media (min-width: 1024px) {
    padding: 0 8em;
  }

  @media (min-width: 1280px) {
    padding: 0 12em;
  }
}

.image-container {
  @media (min-width: 768px) {
    display: flex;
    overflow-x: scroll;
    width: 100%;

    ::-webkit-scrollbar {
      width: 0px;
      background: transparent;
    }
  }
}

img {
  @media (min-width: 768px) {
    height: 100px;
    width: 240px;
    flex-shrink: 0;
    animation: moveSlideShow 9s ease-in-out alternate infinite;
    @keyframes moveSlideShow {
      100% {
        transform: translateX(-1440px);
      }
    }
  }

  @media (min-width: 1280px) {
    @keyframes moveSlideShow {
      100% {
        transform: translateX(-1200px);
      }
    }
  }
}

如果您检查转换，它适用于正确的屏幕尺寸，例如，如果屏幕的宽度正好为 768 像素，则 translateX 将为 -1440 像素，因为：

共有 9 张图片，每张图片的宽度为 240 像素

240 * 9 = 2160 像素

现在，默认情况下，在这个尺寸的屏幕上，它应该显示 3 张图像，所以，如果我想忽略这些图像并完全执行 translateX 到最后，我应该这样做：

2160 - (240 * 3) = 1440 像素

就是这样，但仅针对那个尺寸，如果屏幕稍大或稍小，动画不是正确的，我如何计算translateX 应该使用的正确宽度？

这个项目正在使用 React.js 和 Styled-components，也许一些 javascript 可以帮助我，但我不知道我应该使用什么代码...... :( 如果你有 React-spring 的解决方案，那将很棒，因为我正在学习它，并且使用此工具的解决方案会很有趣:)

Answer 1

使用calc 函数，如calc(100% - 20px)。 有关详细信息，请参阅MDN page。 请注意，如果您需要 100% 的屏幕宽度，translate 属性指的是其自身宽度的 100%。要解决此问题，请尝试将其包装在 100% 宽度的父元素中，并为其应用 transform: translate 属性。

Answer 2

将 sroll 移动到上部容器并使内部元素 inline-flex（其宽度等于其内容）在此处您可以轻松地考虑使用百分比值进行翻译。然后您可以使用vw 单位来近似容器的宽度，因为它是全宽容器：

body {
  margin: 0;
}

.wrapper {
  margin: 0 2.5em;
  overflow: auto;
  --w: calc(100vw - 5em);
}

@media (min-width: 1024px) {
  .wrapper {
    margin: 0 8em;
    --w: calc(100vw - 16em);
  }
}

@media (min-width: 1280px) {
  .wrapper {
    margin: 0 12em;
    --w: calc(100vw - 24em);
  }
}

@media (min-width: 768px) {
  .image-container {
    display: inline-flex;
    animation: moveSlideShow 9s ease-in-out alternate infinite;
  }
  img {
    height: 100px;
    width: 240px;
  }
  @keyframes moveSlideShow {
    100% {
      transform: translateX(calc(-100% + var(--w)));
    }
  }
}

<div class="wrapper">
  <div class="image-container">
    <img alt="Siac" src="https://diey.now.sh/Icons/Clients/SIAC_LOGO.svg">
    <img alt="Change" src="https://diey.now.sh/Icons/Clients/CHANGE_LOGO.svg">
    <img alt="HF" src="https://diey.now.sh/Icons/Clients/H_F_Logo.svg">
    <img alt="VDM" src="https://diey.now.sh/Icons/Clients/VDM_Logo.svg">
    <img alt="Reviu" src="https://diey.now.sh/Icons/Clients/Reviu_Logo.svg">
    <img alt="Total Capital" src="https://diey.now.sh/Icons/Clients/Total_Capital_Logo.svg">
    <img alt="AdelantaT" src="https://diey.now.sh/Icons/Clients/AdelantaT_Logo.svg">
    <img alt="Ayssa" src="https://diey.now.sh/Icons/Clients/Ayssa_Logo.svg">
    <img alt="Carga Logística" src="https://diey.now.sh/Icons/Clients/Carga_Logistica_Logo.svg">
  </div>
</div>