Question

虽然我有一个最后的碰撞，但我已经接近完成这个标题了。如果单击附加的jsFiddle链接，您将看到当您在文档中滚动时，它会将徽标从中心向左移动。我无法让它从中心到左边平滑地动画，相反它只是动画而没有任何动画。

有人可以看看，让我知道修复？

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

.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()
})();

我们确保滚动“更早”做出反应，但给它一些时间来做旅行，所以效果更顺畅。

现在，我们在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

Answer 2

这是你想要做的吗？

 -webkit-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
transition: height 0.3s ease;

只需添加ease

注意：还有其他类型的效果或CSS过渡中的transition-timing-function，您可能需要检查this one

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

2 个答案: