jquery - CSS 元素从左到右显示

Question

我的网站上有两个菜单栏。第一个(黑色)固定在页面顶部。第二个(橙色)会变粘，一旦黑条碰到它。在同一时刻，出现了一个小 Logo 图像，它通过使用名为“inactve”的类和“display:none”隐藏，并通过删除类“inactive”并添加类“active”和“display:inline-block”来显示".

动画 gif 在这里: https://abload.de/img/animation1lujbu.gif

现场版在这里: http://mydivision.net/

但是从“display: none”到“display: inline-block”的变化非常突然。请任何人都可以通过从左向右显示 Logo 来实现这一良好的过渡，以便将社交图标轻轻推到右侧吗？

这是我的代码:

HTML

<div class="topbar-container">
    <div id="slc" class="notonmobile scroll-logo inactive">
        <a href="http://mydivision.net/" title="MYDIVISION.NET | Home">
            <img src="http://mydivision.net/wp-content/themes/v1/img/scroll-logo-small.png" alt="Logo" />
        </a>
    </div>
    <div id="social_container">
        ...
    </div>
    ...
</div>
</div>

CSS

#topbar {display: inline-block; width: 100%; padding: 0; height: 40px; background: #000; position: fixed; top: 0; z-index: 9999;}
.topbar-container {margin: 6px 20px; line-height: 24px;}
.scroll-logo.inactive {display: none;}
.scroll-logo.active {display: inline-block; float: left; margin-right: 20px;}
.scroll-logo img {height: 24px; padding: 3px 0;}
#social_container {float: left; width: 192px;}

jQuery

jQuery(document).ready(function($) {
    $(window).scroll(function() {
        if ($(this).scrollTop() >= $('.sticky-element-active').offset().top - 40) {
            $("#slc").addClass("active");
            $("#slc").removeClass("inactive");
        } else {
            $("#slc").removeClass("active");
            $("#slc").addClass("inactive");
        }
    });
});

Answer 1

我很幸运地修改了您的实时 CSS。您可以尝试过渡时间并进一步调整它，但希望这能为您指明正确的方向。

.scroll-logo.inactive {
  transition: 0.8s;
  transform: translateX(-100%);
  opacity: 0;
  height: 0;
}

.scroll-logo.active {
  transition: 0.6s;
  transform: translateX(0);
  opacity: 1;
  float: left;
  margin-right: 20px;
}