滚动动画翻译答案

【问题标题】：Animate translate on scroll滚动动画翻译
【发布时间】：2014-03-24 08:43:46
【问题描述】：

我试图在用户滚动时为 translate(X, Y) 设置动画。我已经实现了所有的滚动功能，它看起来很糟糕，因为开关是瞬时的。

我似乎无法弄清楚如何为翻译设置动画。

加载时，我的容器的值是-webkit-transform: translate(0%, 0%);，要转到第二个“幻灯片”，它将更改为-webkit-transform: translate(0%, -100%);

我只是通过 jQuery 来做这个：

 $('.container').css({"transform":"translate(0%,-" + positionY + "%)"});

（注意：我稍后会使用 translate(x, y) 来移动侧向。）

【问题讨论】：

【解决方案1】：

使用CSS transition property 获得平滑效果。

.container {
    transition: transform 1s;
}

（您还需要供应商前缀来定位所有浏览器。）

【讨论】：