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

Question

我正在嘗試做一些過渡/轉換效果，如您在此站點上看到的那樣，導航在頁面的中間切換，還可以轉移到另一個頁面。

我創建了一個jsfiddle ，具有兩個導航 ， .mobilenav是在滾動時應更改的.mobilenav ，而.desktopnav是可以滑動的.mobilenav 。 但是現在我想知道如何重新創建該過渡。 （更改導航是在JQuery中使用if，else語句和($(window).scrollTop() > 500)

Answer 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/

Answer 2

我已經在小提琴中模擬了該導航非常接近，當然進行了一些簡化： 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: 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; }