如何重新創建此效果/過渡/動畫？ （HTML/CSS/JQuery）

Question

我正在嘗試做一些轉換/轉換效果，您可以在this site上看到，其中導航在頁面中途切換，並且轉到另一個頁面。

我創建了一個jsfiddle，有兩個資產淨值的.mobilenav是應該在滾動改變的一個，和.desktopnav是滑出，你可以看到一個。但是現在我想知道如何才能重現這一轉變。 （不斷變化的資產淨值在JQuery中完成了一個如果，else語句和($(window).scrollTop() > 500)

Answer 1

我模擬了NAV在我的小提琴相當接近，當然是有一些簡化：https://jsfiddle.net/pttsky/0anpeLj0/

有幾個關鍵概念：

1. 有實際上僅我們添加.full類來指示狀態變化的一個導航。
2. 還有就是nav容器，實際nav及其子li元素
3. 上面列出的每個都有自己的CSS轉換和改變其定位，不透明度和背景動畫。

淺談如何將網站從摺疊狀態更改爲全寬，就像在該網站上一樣。

1. 容器塊略微向上拉導航。它變得不透明，這給人錯覺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。當菜單徘徊，或當它在全角狀態，元素有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; 
   } 
   

Answer 2

或者到設備的回答，您還可以使用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/