CSS 元素从左到右显示

Question

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

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

这里是现场版： http://mydivision.net/

但是从 "display: none" 到 "display: inline-block" 的变化是相当突然的。请任何人都可以通过从左到右显示徽标来实现一个很好的过渡，以便将社交图标轻轻推到右侧？

这是我的代码：

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;
}

Answer 2

从 CSS 中移除 active 和 inactive 并使用下面的代码。 Jquery show() 和 hide() 在为元素设置持续时间时会导致元素的扩展和收缩。

但在你的 html 中保持 inactive 作为类名，以确保每次滚动条件发生时扩展只发生一次：

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