javascript - 我怎样才能重新创建这种效果/过渡/动画？ (HTML/CSS/JQuery)

Question

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

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

完成的

Answer 1

我已经在我的 fiddle 中非常接近地模拟了导航，当然有一些简化:https://jsfiddle.net/pttsky/0anpeLj0/

有几个关键概念:

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

更深入地讨论如何将导航从折叠式更改为全宽式，就像在该网站上一样。

1. 容器 block 稍微向上拉导航。它变得不透明，这给人一种错觉，即 border-radius 从导航中消失了，但实际上，如果我们对 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;
   }
   

2. 除MENU链接外的子元素默认有max-width: 0。当菜单悬停或处于全 Angular 状态时，元素具有 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;
   
   }
   

3. 当改变状态时，导航的所有元素看起来都是淡出然后淡入。我已经为整个导航添加了适当的动画:

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