使用 JavaScript 更改元素的变换属性时过渡不起作用

Question

我一直在尝试创建一个包含多个项目的简单轮播。

想法是使用变换属性向左或向右移动轮播幻灯片，具体取决于用户单击哪个按钮。我使用append和prepend方法来实现“无限滑动”的效果。

我的主要问题是过渡属性没有触发，轮播只是一直捕捉到下一个项目。此外，控制台还记录了一条错误消息，类似于“加载转换值时出现错误”（我没有粘贴整个错误，因为我的浏览器不使用英语作为默认语言）。我不确定这个错误是什么意思，因为尽管有错误，轮播仍在移动。

这些是用于使用轮播的功能：

const slideWidth = document.querySelector('.carouselItem').clientWidth;
let distance = 0;


function moveToPrevious() {
  distance += slideWidth;
  carouselSlide.prepend(carouselSlide.lastElementChild);
  carouselSlide.style.transform = 'translateX(' + distance + 'px)';
}

function moveToPrevious() {
  distance += slideWidth;
  carouselSlide.prepend(carouselSlide.lastElementChild);
  carouselSlide.style.transform = 'translateX(' + distance + 'px)';
}

整个代码笔：https://codepen.io/antonlovric/pen/OJxOyyL

Answer 1

我认为最好使用一个css变量而不是改变整个属性值，我认为这样更清楚：

.carouselSlide {
  display: flex;
  height: 100%;
  --translate-x: 0px;
  transition: 0.5s all ease-in;
  transform: translateX(var(--translate-x));
}

function moveToPrevious() {
  distance += slideWidth;
  document
    .querySelector('.carouselSlide')
    .prepend(carouselSlide.lastElementChild);
  carouselSlide.style.setProperty('--translate-x', distance + 'px');
}

看到我正在设置 --translate-x 的值而不是更改 style.transform。

使用您的代码，如果您检查元素，transform 属性甚至不会改变。

虽然您首先要解决另一个问题，但在解决 translateX 的过渡之后，您在删除元素时遇到了问题。一旦您删除第一个元素并将其放在旋转木马的末尾，内容就会向左移动，因为您删除了一个元素，并且不会有任何过渡。

你的算法应该更复杂。假设您想移动到下一个元素，所以：

首先你做 translateX
然后，当过渡结束时，您要做两件事：
- 重置翻译X
- 将第一个元素移到末尾

您可以通过收听 transitionEnd 活动来做到这一点。

我建议简化逻辑的一件事是始终在左侧有一个额外的元素，在右侧有一个额外的元素，这样您就可以始终通过更改 translateX 值然后调整元素（如果显示前 3 个元素，则必须使用更复杂的算法才能返回上一张幻灯片）

使用 JavaScript 更改元素的变换属性时过渡不起作用

Transitions not working while changing the transform property of an element using JavaScript

html

javascript

css

transform

carousel

使用 JavaScript 更改元素的变换 属性 时过渡不起作用

Transitions not working while changing the transform property of an element using JavaScript

html

javascript

css

transform

carousel

使用 JavaScript 更改元素的变换属性时过渡不起作用