流暢的頁面過渡代碼應(yīng)用在杭州企業(yè)的官網(wǎng)上是一種特別的享受

平滑的網(wǎng)頁頁面過渡是近些年常見的網(wǎng)頁效果。網(wǎng)站訪問者越來越期望得到用戶體驗設(shè)計師的青睞。對于網(wǎng)站開發(fā)公司和SEO專家來說是也是一個挑戰(zhàn)。

因此，在本文中，我們將向您展示什么是頁面過渡，它是什么以及為什么它與訪問者的體驗以及您在網(wǎng)絡(luò)上的成功相關(guān)。

什么是頁面過渡

頁面轉(zhuǎn)換是您網(wǎng)站上從一個網(wǎng)站到另一個網(wǎng)站的轉(zhuǎn)換。例如，如果訪問者在您的主頁上，請單擊指向“關(guān)于我們”頁面的鏈接，這會將他們帶到您的“關(guān)于我們”頁面。

為什么頁面轉(zhuǎn)換與網(wǎng)站的成功相關(guān)

網(wǎng)站上的頁面轉(zhuǎn)換通常非常突然。在過去的幾年中，這已經(jīng)引起了批評，即與應(yīng)用程序相比，網(wǎng)站看起來“過時”并且用戶友好度較低。

Sarah Drasner在其有關(guān)動畫頁面過渡的文章中，解釋了當訪問者查看您的網(wǎng)站并從一頁導(dǎo)航到下一頁時會發(fā)生什么。他們關(guān)注您的側(cè)面，并為他們所在的側(cè)面創(chuàng)建心理圖。好像您剛從汽車，火車或飛機上下來，正在關(guān)注周圍的環(huán)境并了解您的位置以及您是否在正確的位置。

換面時會出現(xiàn)兩種情況。

1.頁面更改突然發(fā)生

典型的情況是頁面過渡突然發(fā)生，這是硬跳轉(zhuǎn)。無法同時看到上一頁和新頁面，并且新頁面可能需要一些時間才能完全顯示。

根據(jù)百度的說法，我們所說的是毫秒到秒，這會影響用戶體驗，排名和銷售。

結(jié)果，您的訪問者可能會迷失方向，必須為新頁面創(chuàng)建一個全新的思維導(dǎo)圖。即使是著名的頁面元素（例如菜單）也將重新定位在地圖上，進行分類，如有疑問，還將重新解釋和評估。

這會導(dǎo)致刺激到用戶。假設(shè)您只是在杭州，下一刻在北京。即使這是您想要的，也必須重新調(diào)整自己的方向。

因此，性能和用戶體驗是齊頭并進的，這對于您的網(wǎng)站優(yōu)化和在網(wǎng)絡(luò)上的成功至關(guān)重要。

2.頁面過渡流暢

如果使用頁面過渡動畫進行過渡，則可以使用該動畫確保從A到B的過渡是平滑的。這創(chuàng)造了一種我們從現(xiàn)實生活中了解到并已學(xué)到的情況。

正如我們不是突然不在另一個地方一樣，我們也不會通過頁面過渡動畫突然在另一個頁面上。相反，新頁面在外觀上變得更清晰，更大，更詳細-而舊頁面在完全消失之前變得更小，更不可見。

動畫頁面過渡可幫助訪問者感到舒適。它增強了您的信任和服務(wù)質(zhì)量。頁面過渡動畫可確保訪問者可以更快地找到自己的出路，并找到所需的信息。

平滑頁面過渡及其當前分布

即使漂亮的頁面過渡的創(chuàng)意沒有失敗，我們目前仍主要在兩個方面遇到軟頁面過渡。但這不限于此。因此，我們簡要介紹了這兩個已知領(lǐng)域，然后為您提供了具有很大潛力的第三個實現(xiàn)方案。

移動應(yīng)用程序和頁面過渡

平滑過渡對于移動應(yīng)用程序來說尤其典型。與網(wǎng)站上的動畫頁面過渡類似，動畫過渡也在那里，以便用戶了解應(yīng)用程序中正在發(fā)生的事情。

動畫使瀏覽應(yīng)用程序更加容易，并向用戶顯示他們在應(yīng)用程序中的前進方向。

我們通常通過從顯示屏的右側(cè)推入底部來從一側(cè)導(dǎo)航到底部。一個簡單的過渡仍然使保持方向非常容易。

SPA和過渡

但是，幾年來，在網(wǎng)站上的SPA中也發(fā)現(xiàn)了平滑的過渡。SPA（單頁應(yīng)用程序）是一個實施為基于Web的應(yīng)用程序的網(wǎng)站，僅包含一個HTML文件。新數(shù)據(jù)或更改后的數(shù)據(jù)將使用JavaScript動態(tài)重新加載。

許多人在使用SPA時并未意識到它是單頁應(yīng)用程序而不是網(wǎng)站。典型示例包括Gmail，Google地圖，Netflix，Paypal或GitHub。

如t3n所示，例如，在Gmail中打開新郵件時，不會從服務(wù)器加載新的HTML文檔。而是在訪問者的瀏覽器中僅更改當前文檔的內(nèi)容，而無需重新加載頁面。

?

SPA的缺點

SPA可以營造出類似APP平滑的感覺，但是SPA通常不適合典型的商業(yè)網(wǎng)站。其原因包括：

spa和搜索引擎優(yōu)化

單頁應(yīng)用程序的搜索引擎優(yōu)化仍然是SEO專家面臨的真正挑戰(zhàn)。確實，百度現(xiàn)在可以更好地為SPA編制索引，特別是如果遵循百度發(fā)布的技巧。

但是，根據(jù)百度網(wǎng)站站長趨勢分析師John的說法，對SPA的全部內(nèi)容進行索引可能需要一些時間。

安全

SPA的安全性較差?？缯军c腳本（XSS）使攻擊者能夠?qū)⑵渌脩舻目蛻舳四_本注入Web應(yīng)用程序。

當通過SPA傳輸敏感數(shù)據(jù)時（例如，在支付的情況下），該安全問題變得更加成問題。通常，并非SPA的所有內(nèi)容都是可見的，因此即使訪客沒有安全感，也可能會感到安全。

知識

SPA使用JavaScript框架（例如Vue，React，Angular或Backbone）實現(xiàn)。在全球范圍內(nèi)，尋找具有適當技術(shù)訣竅的優(yōu)秀網(wǎng)站開發(fā)公司的搜索量巨大。開發(fā)人員可以相應(yīng)地選擇他們的工作。

費用

增加成本不僅是資源的稀缺。服務(wù)器成本也可能比普通網(wǎng)站托管昂貴得多。

緩慢

對瀏覽器來說繁重的框架的初始加載可能需要一些時間。一旦收費，SPA當然應(yīng)該非?？欤@通常是與眾不同的。但是，JavaScript中的內(nèi)存問題甚至可能導(dǎo)致功能強大的系統(tǒng)變慢。

插曲

結(jié)果，SPA特別被諸如谷歌，滴滴，微信等的大公司使用。在這里，非常高興的是Gmail之類的應(yīng)用程序，它們與SEO不相關(guān)，或者其內(nèi)容不應(yīng)在搜索引擎中找到。

登陸頁面較少見。對于普通的商業(yè)網(wǎng)站幾乎完全沒有。

幸運的是，SPA并不是在網(wǎng)絡(luò)上實現(xiàn)平滑頁面轉(zhuǎn)換的唯一方法。

?

具有和不具有WP的高質(zhì)量網(wǎng)站的頁面過渡

如所承諾的，我們在這里提出了第三個選擇，以實現(xiàn)平穩(wěn)過渡。從技術(shù)上講，這些頁面轉(zhuǎn)換的實現(xiàn)對于任何網(wǎng)站都是完全可行的。為此，既不需要移動應(yīng)用程序，SPA也不需要框架。

對此也需要具備非常非常好的JavaScript知識。但是SPA在SEO，安全性，服務(wù)器以及部分成本方面的缺點可以大大降低，甚至完全消除。此外，可以與WordPress之類的CMS結(jié)合使用，以保留此類系統(tǒng)帶來的優(yōu)勢。

這是您可以為網(wǎng)站創(chuàng)建漂亮的頁面過渡的方法

網(wǎng)頁之間平滑過渡的挑戰(zhàn)是它們不遵循正常的網(wǎng)站邏輯。如果我們單擊網(wǎng)站上的鏈接以轉(zhuǎn)到同一網(wǎng)站上的另一個頁面，則通常會發(fā)出新的服務(wù)器請求，并且頁面會完全重新加載。我們沒有一種自然，簡單的方法來為網(wǎng)站進行平滑的頁面轉(zhuǎn)換。

?

手動平滑的側(cè)面過渡

一方面，軟轉(zhuǎn)換可以手動進行100％編碼。如果可接受的挑戰(zhàn)是長而崎嶇不平的路徑，那么對于經(jīng)驗豐富的網(wǎng)站開發(fā)公司人員而言，這是一條可行且推薦的路徑。

畢竟，停止并更改瀏覽器的本機功能很重要，而這本身并不總是那么容易。本質(zhì)上，它涉及以下幾點：

• 防止瀏覽器出現(xiàn)正常的鏈接點擊行為
• 控制和自定義跨頁面內(nèi)容的加載和替換
• 通過JavaScript加載內(nèi)容
• 管理JavaScript及其現(xiàn)有內(nèi)容的生命周期
• 將URL更改為目標URL，而無需從服務(wù)器重新加載新頁面
• 預(yù)加載：如有必要，請?zhí)崆凹虞d內(nèi)容以提高速度（例如，在懸停和單擊網(wǎng)站訪問者之間）
• 靜態(tài)頁面緩存
• 非常重要：動畫設(shè)計過渡

該文章提升您的網(wǎng)頁轉(zhuǎn)換和頁面轉(zhuǎn)換為大家??提供了一個很好的介紹這條道路。

庫的平滑頁面過渡

除了100％自己編碼外，您還可以在庫的幫助下創(chuàng)建平滑過渡。更準確地說，是使用現(xiàn)代JavaScript庫。

在三種情況下，值得進行平滑的頁面轉(zhuǎn)換。

1. 您想節(jié)省時間，而不必每次都實施和思考上面概述的技術(shù)。在這種情況下，值得使用可重用的庫。它使您有機會專注于過渡效果本身，而不必過多地關(guān)注過渡效果所必需的框架。
2. 您不想重新發(fā)明，而是想借鑒其他專家的知識和代碼。您重視并可以向其學(xué)習(xí)的導(dǎo)師，以及可以與他們交流思想和澄清問題的社區(qū)。
3. 您將與其他開發(fā)人員一起實現(xiàn)項目?？蚣芎统绦驊?yīng)更加統(tǒng)一，因此效率更高。
   
   

用于頁面轉(zhuǎn)換的庫

現(xiàn)在有少數(shù)JavaScript庫可讓您實現(xiàn)軟頁面轉(zhuǎn)換。這些包括：

Barba.js

Barba僅9kb，是一個小型的JavaScript庫，專門為動畫頁面過渡而開發(fā)。他們的目標是幫助您實現(xiàn)網(wǎng)站頁面之間的流暢，順暢的過渡。

自2015年以來，它一直在幫助減少頁面之間的延遲，最大程度地減少瀏覽器的HTTP請求并改善用戶的Web體驗。

Barba用TypeScript編寫。JavaScript和CSS均可用于實際的動畫。Barba.js和GSAP的結(jié)合對于強動畫也很典型。GSAP是一個穩(wěn)定且高性能的JavaScript動畫庫，Google以及其他公司也推薦使用。

這樣，頁面過渡的動畫幾乎沒有限制。

Highway.js

Highway.js由Dogstudio于2018年開發(fā)，是一個現(xiàn)代JavaScript過渡管理器?；旧喜皇亲鳛锽arba的替代品，而是作為Dogstudio希望與社區(qū)共享的同一問題的解決方案。

JavaScript庫基于ES6。為了獲得最佳的瀏覽器兼容性，這些功能還針對ES5進行了翻譯，因此，除了Google Chrome，F(xiàn)irefox，Edge和Safari外，還支持最新的Internet Explorer IE11。

憑借其2.5kb的資源，Highway是一種輕量級的產(chǎn)品，代表著易于使用和適應(yīng)的庫。這樣做的原因尤其是基礎(chǔ)。經(jīng)驗豐富的開發(fā)人員可以輕松擴展ES6類，并且可以使用其他功能補充整個庫。動畫計劃使用JavaScript，GSAP和WebGL。

同時，Dogstudio嘗試著重于社區(qū)經(jīng)常使用的功能。因此，與Barba相比，它不那么復(fù)雜。

開關(guān)

Georgy Marchuk為靜態(tài)網(wǎng)站開發(fā)了SWOT 2017，重點是靈活性和可用性。

與Highway和Barba一樣，Swup也是一個過渡庫，但是其核心基于CSS過渡。帶有附加插件的JavaScript可以擴展頁面過渡動畫。

Swup的使用似乎是一個更容易的切入點，特別是對于不熟悉JavaScript但已經(jīng)有CSS經(jīng)驗的設(shè)計人員而言。

SWUP的另一個功能是可以輕松定義任意數(shù)量的容器。這樣，即使是網(wǎng)站的最小部分也更容易替換。

smoothState.js

作為第四種可能性，我想提到smoothState。它由MiguelPérez于2014年開發(fā)，基于jQuery。jQuery是一個JavaScript庫，從本質(zhì)上帶來了很多簡化JavaScript操作的方法。不幸的是，重量（kb）也是如此，這就是為什么如今許多人嘗試不使用它而僅在必要時才使用jQuery的原因。

盡管如此，smoothState仍然堅持并且仍然很流行。

?

結(jié)論

網(wǎng)絡(luò)上的頁面轉(zhuǎn)換通常非常突然。一鍵單擊一個鏈接，當前頁面消失，新頁面盡快出現(xiàn)。這是一個不錯的開始，但是如今，您的網(wǎng)站訪問者已經(jīng)習(xí)慣了使用移動應(yīng)用程序獲得更好的用戶體驗。

幸運的是，現(xiàn)在有多種方法可以對頁面過渡進行動畫處理，從而使其平滑且自然地發(fā)生。而且無需創(chuàng)建單個頁面應(yīng)用程序或使用框架。

憑借對JavaScript的高度了解，您可以自己編寫100％流暢的頁面過渡代碼，也可以使用庫以及所需的CSS和JavaScript動畫。您已經(jīng)知道了上面的示例。如果您有任何疑問或需要支持，請隨時與我們聯(lián)系?。

令人高興的是，您甚至可以為與CMS之類的網(wǎng)站（如WordPress、DEDE、mywind、thinphp）結(jié)合的網(wǎng)站開發(fā)類似本機的頁面過渡，從而結(jié)合應(yīng)用程序和典型CMS商業(yè)網(wǎng)站的優(yōu)勢。

您的訪客可以享受到更好的用戶體驗，這讓人想起自然過渡和現(xiàn)實生活中位置的變化。它為他們提供了方向性，安全性并增加了娛樂性。同時，您的網(wǎng)站獲得了質(zhì)量，您的品牌獲得了聲譽，并且相應(yīng)地獲得了更高的質(zhì)量。