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

【问题标题】：Animate image from center to left of div从 div 的中心到左侧的动画图像
【发布时间】：2014-10-01 03:07:32
【问题描述】：

我非常接近完成这个标题，尽管我有最后一个碰撞。如果您单击附加的 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;
}

非常感谢，干杯！

【问题讨论】：

要制作动画，首先必须有一个开始位置和一个结束位置，无论是固定的、绝对的还是相对的。由于一个在滚动时是浮动图像，它没有位置，它是浮动的，当它居中时它是 inline-block 也没有位置。为什么，它看起来不错。
@Christina 如果它是一个从中心到左的漂亮平滑动画，它会看起来更好。是玩浮点数还是位置问题？

标签： jquery html css animation

【解决方案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

【讨论】：

【解决方案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

【讨论】：

我认为这更像是克里斯蒂娜所说的。我想是因为定位？
当你这么说时，我的印象是你在谈论元素动画的方式：“我不能完全让它从中心向左平滑地动画，相反，它只是在没有任何动画的情况下移动。”