滚动上带有过渡标志的导航菜单

Question

我正在尝试获取徽标以更改滚动状态。 （例如：www.digitalblb.com）

它应该如何工作； 1.大Logo原来显示 - 滚动更改为 2. 迷你标志 - 具有360'的旋转过渡效果

header.html

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
<%= link_to image_tag("biglogo-160x80.png", alt: "BigLogo"), root_url,class:"menu__biglogo" %>
<%= link_to image_tag("minilogo.png", alt: "MiniLogo"), root_url, class:"menu__minilogo" %>
</div>

CSS /* 过渡标志*/

.menu__minilogo{
    opacity: 1;
    visibility: visible;
    margin-left: 60px;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

.menu__biglogo{
    width: 220px;
    overflow: hidden;
}

JS

$(document).ready(function(){
  var logo = $(".navbar-header");
  logo.find(".menu__minilogo").hide();
  $(window).scroll(function() { // check if scroll event happened
    if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
      $(".navbar").css("background-color", "#fff"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
      $(".nav a").css('color', '#0a4f6f');
      logo.find(".menu__biglogo").hide();
      logo.find(".menu__minilogo").show();

      console.log(logo.find(".menu__biglogo"))
    } else {
      $(".navbar").css("background-color", "transparent"); // if not, change it back to transparent
      $(".nav a").css('color', 'white');
      logo.find(".menu__minilogo").hide();
      logo.find(".menu__biglogo").show();

    }
  });
});

当前状态。 显示大徽标，滚动显示迷你徽标，但没有任何旋转过渡。

有时，当点击网站时，徽标会随机堆叠在彼此之上，但在刷新该页面时，它会再次恢复为大徽标（所以这只是加载时的一个小错误）。

任何帮助将不胜感激。谢谢

Answer 1

您正在使用 jQuery 的 .show() 和 .hide() 函数来显示/隐藏您的徽标。这行得通，但他们实际上所做的是将徽标的 display 属性从 block 切换到 none，反之亦然。

display 的问题在于它不是animatable。 display:none 和 display:block 之间不能有转换。它开启或关闭。

那么你可以做什么：

• 始终显示您的两个徽标
• 对其动画的初始状态进行编码
• 当他们有一个自定义类（通常是active - 但你可以使用任何类，只要它不与任何东西冲突）时，对动画的最终状态进行编码。
• 您要在其上制作动画的所有属性都应为animatable（w3schools 在这方面是一个很好的资源）
  • 最重要的是opacity，因为它将控制您的徽标的可见性。
• 加载带有 active 类的大徽标和没有类的小徽标的页面。
• 在滚动/单击/鼠标触发器/任何事件上切换两个徽标上的类（“活动”），从一个中删除并在另一个上添加。因为它们具有animatable 属性和为这些动画设置的过渡，所以它们的动画效果很好。

这是一个例子：

$(document).ready(function(){
  var navbar = $(".navbar-header");
  $(window).scroll(function() {
    if ($(document).scrollTop() > 50) { 
      $(".navbar").css("background-color", "#fff"); 
      $(".nav a").css('color', '#0a4f6f');
      
      navbar.find(".menu__biglogo").removeClass('active');
      navbar.find(".menu__minilogo").addClass('active');

    } else {
      $(".navbar").css("background-color", "transparent");
      $(".nav a").css('color', 'white');
      navbar.find(".menu__biglogo").addClass('active');
      navbar.find(".menu__minilogo").removeClass('active');

    }
  });
});

.navbar-header {
  position: fixed;
}

.menu__minilogo{
    width: 200px;
    height: auto;
    position: absolute;
    opacity: 0;
    margin-left: 0;
    transform: rotate(0deg);
    transition: all .6s cubic-bezier(.4,0,.2,1);
}
.menu__minilogo.active {
  width: 60px;
  margin-left: 60px;
  opacity: 1;
  transform: rotate(360deg);
}

.menu__biglogo{
    width: 220px;
    height: auto;
    opacity: 0;
    transition: opacity .6s cubic-bezier(.4,0,.2,1);
}
.menu__biglogo.active {
  opacity: 1;
  transition: opacity .3s cubic-bezier(.4,0,.2,1) .3s;
}

body {
  min-height: 200vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  <img src="http://lorempixel.com/g/400/400/fashion" class="menu__minilogo" />
  <img src="http://lorempixel.com/g/400/400/fashion" class="menu__biglogo active" />
</div>

我没有在其中加载 Bootstrap，但我假设您已经了解了该部分。
旁注：如果您的大徽标和小徽标是相同的图像，则没有任何意义他们都。您可以将大的调整大小/旋转到小位置并返回，只为它的 transform 属性设置动画，而不是不透明度。