如何使用 css 变换创建循环过渡动画

Posted 2023-03-07

【中文标题】如何使用 css 变换创建循环过渡动画

【英文标题】：How to create loop transition animation with css transform

【发布时间】：2019-06-07 14:02:29

【问题描述】：

谁能帮我用 css 变换创建一个循环动画过渡。

我创建了一个简单的滑块，它使用变换来移动项目。问题是当我向右移动并且 translate 的值从 translate3d(-544px, 0px, 0px) 到 translate3d(-272px, 0px, 0px) 时，它将从左到右过渡，我希望在单击下一个按钮时过渡效果继续从右到左移动。

当使用上一个按钮时也会做类似的事情。我很确定这是可以实现的，因为 owlCarousel 实现了他们的无限循环动画，就像我试图实现的那样，你可以从这里看到它https://codepen.io/anon/pen/GPwwmz

这是我创建的小提琴https://jsfiddle.net/6ofhs3jq/

不胜感激，

谢谢

【参考方案1】：

您需要在我留下的答案中执行相同的原则jquery-javascript-loop-slider-item，几乎是相同的事情。

请记住，您可以在没有 JS heliping 的情况下使用 translate3d 创建和不定式循环过渡，当用户在箭头方向之间导航时，您需要克隆以使您的 carousel 不定式。

您需要修复图像尺寸（宽度）。 所有图像都需要相同的宽度，才能使用 translate3d 创建不定式循环。 当您读取轮播的最后一个和第一个元素时，您需要克隆这些元素并将它们放入右侧以创建不定式循环。

您可以通过将代码阅读到Owl Carousel Library来了解更多信息

【讨论】：

我认为 1 和 2 实际上并不重要，我可以根据下一张幻灯片的宽度和 vss-wrap 与其父级的距离来计算 vss-wrap 的移动。这是主要包装器，在我的情况下，数字 3 也不是问题，我唯一关心和主要问题是动画效果，如果 translate3d 是从 -350 并且将下降到 -100 我希望它继续移动并像owlCarousel一样从右到左动画，除非它是触发的上一个按钮，