CSS-Element offenbaren von links nach rechts

Question

Ich habe zwei Menüleisten auf meiner Website. Der erste (schwarz) ist oben auf der Seite fixiert. Der zweite (orange) wird klebrig, sobald der schwarze Balken darauf trifft. Im selben Moment erscheint ein kleines Logo-Bild, das durch Verwendung einer Klasse namens "inactive" mit "display: none" ausgeblendet wurde und durch Entfernen der Klasse "inactive und Hinzufügen der Klasse" active "with" display: inline-block angezeigt wird “

Animierte gIF hier:. https://abload.de/img/animation1lujbu.gif

Live-Version hier: http://mydivision.net/

Aber der Wechsel von "display: none" auf "display:. inline-block" ist ziemlich abrupt kann Bitte jedermann Hlep macht dies zu einem schönen Übergang mit dem Logo von links nach rechts, so dass die sozialen Symbole sanft nach rechts geschoben werden?

Hier ist mein Code:

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

entfernen aktiv und inaktiv von CSS und den Code unten verwenden. Jquery show() und hide() verursachen Expansion und Kontraktion von Elementen, wenn die Dauer für sie festgelegt.

Aber halt inaktiv als Klassenname in Ihrem HTML, um sicherzustellen, dass die Erweiterung nur einmal jedes Mal, wenn der Scroll-Zustand geschieht, geschieht: CSS

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

Answer 2

Ich hatte etwas Glück zu modifizieren Ihre Live. Du könntest mit den Übergangszeiten spielen und sie weiter optimieren, aber hoffentlich weist dich das in die richtige Richtung.

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