如何重新创建此效果/过渡/动画？ (HTML/CSS/JQuery)答案

【问题标题】：How can I recreate this effect/transition/animation? (HTML/CSS/JQuery)如何重新创建此效果/过渡/动画？ (HTML/CSS/JQuery)
【发布时间】：2017-05-03 01:54:17
【问题描述】：

我正在尝试做一些转换/转换效果，正如您在 this site 上看到的那样，导航在页面中途切换并有点转移到另一个页面。

我创建了一个jsfiddle，有两个导航，.mobilenav 是应该在滚动时更改的，.desktopnav 是如您所见滑出的导航。但现在我想知道如何重新创建这种过渡。（更改导航是在 JQuery 中使用 if、else 语句和 ($(window).scrollTop() > 500) 完成的

【问题讨论】：

标签： javascript jquery css css-transitions transform

【解决方案1】：

除了 Device 的回答，您还可以在一个导航上使用 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/

【讨论】：

非常感谢您的努力和帮助！赞赏！

【解决方案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 项目似乎淡出然后淡入。我已经为整个 nav 添加了适当的动画：

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

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

【讨论】：

非常感谢您的努力和帮助！赞赏！