jquery - 从 div 的中心到左侧的动画图像

Question

虽然我还有最后一个障碍，但我非常接近完成这个标题。如果您单击附加的 jsFiddle 链接，您将看到当您在文档中滚动时，它会将 Logo 从中心移动到左侧。我不能完全让它从中心到左边平滑地动画，相反它只是移动而没有任何动画。

有人可以看一下并告诉我修复方法吗？

请确保结果屏幕已打开以显示非媒体查询版本。

http://jsfiddle.net/tebrown/mo9aebxc/1/

.cbp-af-header img {
text-transform: uppercase;
color: #333;
letter-spacing: 4px;
font-size: 4em;
height: 100px;
width: 100px;
display: block;
margin: 0 auto;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

非常感谢，干杯!

Answer 1

试试这个:

首先，对你的 JS 做一个小改动:

var cbpAnimatedHeader = (function () {
    var b = document.documentElement,
        g = document.querySelector(".cbp-af-header"),
        e = false,
        a = 200;

    function f() {
        window.addEventListener("scroll", function (h) {
            if (!e) {
                e = true;
                setTimeout(d, 500)
            }
        }, false)
    }

    function d() {
        var h = c();
        if (h >= a) {
            classie.add(g, "cbp-af-header-shrink")
        } else {
            classie.remove(g, "cbp-af-header-shrink")
        }
        e = false
    }

    function c() {
        return window.pageYOffset || b.scrollTop
    }
    f()
})();

我们确保滚动“更早”使用react，同时给它一些时间进行移动，因此效果更平滑。

现在，我们在 CSS 中添加:

.cbp-af-header img {
    height: 100px;
    width: 100px;
    display: block;
    margin: 0px auto;
    transition: all 0.8s ease-in-out;
    position: relative;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

这是为了“来回”平滑过渡，同时也是为了启动硬件加速，使动画更加流畅，抖动更少。

当然，您可以调整这些值，但我认为这或多或少就是您要找的，see fiddle