时间戳

首页 > 解决方案 > 如何知道“translateX”动画中的最大“宽度”？

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

问题描述

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

<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 的解决方案，那就太好了，因为我正在学习它，使用这个工具的解决方案会很有趣:)

标签： htmlcssreactjsanimationcss-animations

解决方案

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

推荐阅读