过渡和变换之前的 CSS 位置元素

Posted 2023-03-07

【中文标题】过渡和变换之前的 CSS 位置元素

【英文标题】：CSS position element before transition and transform

【发布时间】：2020-12-22 11:05:48

【问题描述】：

我正在尝试使用 css 转换来转换 div，并通过 css 转换将转换应用于移动。

是否可以为元素指定“开始”位置？我需要在动画之前翻译元素。

.mediaViewItem:nth-child(3) 
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
    transform: translate3d(-200%, 0, 0); translate3d(-100%, 0, 0);

在上面的代码中，我需要在没有动画的情况下从 translate3d(-200%, 0, 0) 开始，然后通过过渡从 -200% 移动到 -100%。

有什么想法吗？

【问题讨论】：

考虑使用animation 而不是transition？

告诉你！我设法让它与动画一起工作！那是缺少的部分！

【参考方案1】：

那是你为元素设置的初始位置，使用javascript添加一个类 当您需要执行动画时，它将元素转换恢复到正常位置。例如。通过js添加一个类，如：

.animated 
    transform: translate3d(0, 0, 0); translate3d(0, 0, 0);