Question

我正在尝试做一些转换/转换效果，就像你在this site看到的那样，导航切换到页面的一半，然后转移到另一个。

我创建了jsfiddle，有两个导航，.mobilenav是滚动时应更改的导航，而.desktopnav是滑出的导航你可以看到。但现在我想知道如何重新创造这种转变。（更改导航在JQuery中使用if，else语句和($(window).scrollTop() > 500)

完成

Answer 1

除了设备的答案，您还可以在一个导航上使用css过渡来获得相同的效果，而不是使用两个导航。

通过在导航栏上切换班级，您可以触发转换并将导航放置在正确的位置。

JS：

$(document).ready(function() {
  var nav = $('.desktopnav');
  $(window).scroll(function() {
    var scrolltop = $(window).scrollTop();
    if (scrolltop > 500 && !nav.hasClass('scrolled')) {
      nav.addClass('scrolled');
    }
    else if (scrolltop <= 500 && nav.hasClass('scrolled')) {
      nav.removeClass('scrolled');
    }
  });
});

CSS：

.desktopnav {
  /* ... snipped, unchanged ... */
  transition: all 0.2s ease-out;
}

.desktopnav>ul {
  transition: all 0.2s ease-out;
}

.desktopnav>ul>.dropdown {
  /* ... snipped, unchanged ... */
  transition: all 0.2s ease-out;
}

/* ... snipped unchanged styles for the unscrolled menu ... */

.desktopnav.scrolled {
  top: 0px;
  right: auto;
  left: 0px;
  width: 100%;
}

.desktopnav.scrolled>ul {
  margin-top:0px;
  background: #fff;
}

.desktopnav.scrolled>ul>.dropdown {
  border-radius: 0px;
}

.desktopnav.scrolled>ul>.dropdown .dropdown-content {
  max-width: 1000px;
  float: none;
  display: inline-block;
  vertical-align: middle;
  margin-left: 19px;
}

https://jsfiddle.net/q80k0y7v/1/

Answer 2

我在我的小提琴中非常接近地模拟了导航，当然还有一些简化：https://jsfiddle.net/pttsky/0anpeLj0/

有几个关键概念：

实际上只有一个导航向我们添加.full类以指示状态更改。
有一个nav，实际nav及其子li元素的容器
上面列出的每一个都有自己的CSS过渡和动画，可以改变它们的位置，不透明度和背景。

更深入地讨论如何将导航从折叠状态更改为全宽度状态。

容器块略微向上拉导航。它变得不透明，这会产生border-radius从导航中消失的幻觉，但实际上如果我们设置了边框半径的动画，那将是丑陋的。

.nav-container {
  display: block;
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
  padding: 25px 25px 15px;
  -webkit-transition: .8s;
  transition: .8s;
}
.full {
  background: #fff;
  padding-top: 15px;
}

除MENU链接外，子元素默认为max-width: 0。当菜单悬停或处于全宽状态时，元素具有max-width: 200px，而MENU具有相反的行为：

.nav-main .item {
  display: block;
  float: left;
  max-width: 0;
  opacity: 0;
  -webkit-transition: .8s;
  transition: .8s;
  /* limit width */
  overflow: hidden;
  line-height: 3em;
}

.nav-main .toggle {
  max-width: 200px;
  opacity: 1;
  -webkit-transition: .6s .4s;
  transition: .6s .4s;
}

.full .nav-main .item {
  max-width: 200px;
  opacity: 1;
}

.full .nav-main .item + .item {
  margin-left: 12vw;
}

.full .nav-main .toggle {
  max-width: 0;
  opacity: 0;
  -webkit-transition: .1s;
  transition: .1s;

}

当改变状态时，导航的所有项目似乎淡出然后淡入。我已经为整个导航添加了适当的动画：

/* nav full-width */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.full .nav-main {
  animation: blink .8s;
}

如何重新创建此效果/过渡/动画？（HTML / CSS / JQuery的）

2 个答案:

如何重新创建此效果/过渡/动画？ （HTML / CSS / JQuery的）

2 个答案:

如何重新创建此效果/过渡/动画？（HTML / CSS / JQuery的）