greensock下載

在此Draggable旅程的第一部分中，我們討論了如何包括腳本，研究了ThrowPropsPlugin，包括了啟動(dòng)我們的項(xiàng)目的要求，希望將其發(fā)展到11??個(gè)！ 現(xiàn)在，準(zhǔn)備制作一個(gè)可以對(duì)鍵盤和觸摸做出React的非畫布菜單系統(tǒng)。

演示

我們將在本教程其余部分中構(gòu)建和討論的完整演示也可以在CodePen上獲得。

我鼓勵(lì)您在盡可能多的設(shè)備上進(jìn)行此項(xiàng)測(cè)試，尤其是鍵盤導(dǎo)航。 每次交互（無(wú)論是觸摸，鍵盤還是鼠標(biāo)）都已考慮在內(nèi)，但是正如您在我們當(dāng)前的情況中所發(fā)現(xiàn)的那樣， 您無(wú)法檢測(cè)到觸摸屏 ，有時(shí)甚至嘗試這樣做都會(huì)導(dǎo)致誤報(bào) 。

設(shè)置

使用第一部分中的標(biāo)記，我們將首先添加一個(gè)用于結(jié)構(gòu)目的的容器div以及用于CSS和JavaScript鉤子的相關(guān)類。

………

以“ js”前綴開頭的類表示這些類僅出現(xiàn)在JavaScript中； 刪除它們會(huì)妨礙功能。 它們從未在CSS中使用過(guò)，從而有助于隔離關(guān)注點(diǎn)。 周圍的容器將有助于控制滾動(dòng)行為，這將在后面CSS部分中討論。

輔助功能

有了適當(dāng)?shù)幕A(chǔ)之后，就該在頂部添加ARIA層以為屏幕閱讀器和鍵盤用戶提供語(yǔ)義含義了。

…

由于默認(rèn)情況下菜單將被隱藏，因此aria-hidden屬性被標(biāo)記為true ，并將根據(jù)菜單的狀態(tài)進(jìn)行相應(yīng)的更新。 對(duì)于打開為false ，對(duì)于關(guān)閉為true 。 這是根據(jù)W3C規(guī)范對(duì)aria-hidden屬性的說(shuō)明：

表示該元素及其所有后代對(duì)作者所實(shí)現(xiàn)的任何用戶都不可見或不可感知。 […]作者必須在未顯示的內(nèi)容上設(shè)置aria-hidden =“ true”，無(wú)論隱藏它的機(jī)制如何。 這使輔助技術(shù)或用戶代理可以正確跳過(guò)文檔中的隱藏元素。 ?W3C WAI-ARIA規(guī)格

作者應(yīng)注意隱藏的內(nèi)容，從而使此屬性成為本文討論范圍之外的單獨(dú)討論。 對(duì)于那些好奇的人，規(guī)范進(jìn)一步定義了屬性，并且有些古怪。 關(guān)于規(guī)范術(shù)語(yǔ)，我通常不會(huì)這么說(shuō)。

CSS

我們CSS是魔術(shù)真正開始的地方。 讓我們從演示中獲取有意義的重要部分并對(duì)其進(jìn)行分解。

body {// scroll fixheight: 100%;overflow: hidden;// end scroll fix } .app {// scroll fixoverflow-y: scroll;height: 100vh;// end scroll fix } .dragaebel-nav {height: 100vh;overflow-y: auto;position: fixed;top: 0;right: 0; }

將主體高度設(shè)置為100％可以使容器拉伸整個(gè)視口，但它也起著更重要的作用。 讓我們隱藏它的溢出。

溢出滾動(dòng)修補(bǔ)程序有助于控制主容器和導(dǎo)航中的任何一個(gè)包含溢出內(nèi)容時(shí)的行為。 例如，如果容器已滾動(dòng)（或菜單），則當(dāng)用戶到達(dá)初始滾動(dòng)元素的末尾時(shí)，另一個(gè)容器將不會(huì)滾動(dòng)。 這是一種怪異的行為，通常不會(huì)討論，但是會(huì)帶來(lái)更好的用戶體驗(yàn)。

視口單位

視口單元功能非常強(qiáng)大，并且在主容器如何容納溢出內(nèi)容方面起著至關(guān)重要的作用。 如今，視口單元在各種瀏覽器中都具有出色的支持 ，我強(qiáng)烈建議您開始使用它們。 我在導(dǎo)航上使用了vh單位，但我可以改用百分比。 在開發(fā)過(guò)程中，發(fā)現(xiàn)div.app必須使用vh單位，因?yàn)榘俜直炔辉试S溢出的內(nèi)容保持典型的滾動(dòng)行為； 內(nèi)容導(dǎo)致被剪切。 如果菜單項(xiàng)超出了菜單的高度或視口的高度變窄，則可以設(shè)置溢出來(lái)進(jìn)行scroll準(zhǔn)備。

// Allow nav to open when JS fails .no-js .dragaebel-nav:target {margin-right: 0; }.dragaebel-nav {margin-right: -180px;width: 180px; }

.no-js .nav:target可以訪問我們的菜單，而不管JavaScript是否失敗或已關(guān)閉，因此我們將ID值添加到菜單觸發(fā)器的href屬性的原因。

主導(dǎo)航通過(guò)負(fù)邊距向右移動(dòng)，該負(fù)邊距也與導(dǎo)航寬度相同。 為了簡(jiǎn)潔起見，我正在編寫Vanilla CSS，但是我敢肯定，您可以在自己選擇的預(yù)處理器中寫一些更奇特的東西。

JavaScript

JavaScript是此可拖動(dòng)菜單之旅的最后一站，但是在編寫一行JS之前，我們需要編寫模塊模式設(shè)置。

var dragaebelMenu = (function() {function doSomething() {…}return {init: function() {…}} })();dragaebelMenu.init(); // start it!

變數(shù)

對(duì)于配置設(shè)置，我們將定義一些變量以供將來(lái)參考。

var dragaebelMenu = (function() {var container = document.querySelectorAll('.js-dragsurface')[0],nav = document.querySelectorAll('.js-dragnav')[0],nav_trigger = document.querySelectorAll('.js-dragtoggle')[0],logo = document.querySelectorAll('.js-draglogo')[0],gs_targets = [ container, nav, logo, nav_trigger ],closed_nav = nav.offsetWidth + getScrollBarWidth();})();

除了定義了我們的GreenSock目標(biāo)的最后兩個(gè)變量以及導(dǎo)航菜單的寬度之外，這些變量中的大多數(shù)只是在獲取DOM元素。 實(shí)用程序功能getScrollBarWidth() （今天在我們的討論之外）檢索滾動(dòng)條的寬度，以便我們可以將導(dǎo)航欄定位在剛超出其自身寬度的位置，以便在菜單打開時(shí)看到它。 目標(biāo)是菜單打開時(shí)我們移動(dòng)的對(duì)象，以允許推送相鄰的內(nèi)容。

方法

為了簡(jiǎn)短起見，我將僅討論對(duì)菜單行為的功能極為重要的方法。 在演示中沒有看到的所有其他內(nèi)容都是“糖在上面”的東西，它使菜單更加強(qiáng)大。

function menu(duration) {container._gsTransform.x === -closed_nav ? TweenMax.to(gs_targets, duration, { x: 0, ease: Linear.easeIn }) : TweenMax.to(gs_targets, duration, { x: -closed_nav, ease: Linear.easeOut }); }

menu功能檢測(cè)容器的x坐標(biāo)是否等于封閉的導(dǎo)航狀態(tài)。 如果是這樣，則將目標(biāo)設(shè)置回其初始位置，否則將其設(shè)置到打開位置。

function isOpen() {return container._gsTransform.x < 0; }

這是一個(gè)用于檢查菜單狀態(tài)的實(shí)用程序功能。 如果關(guān)閉菜單，則返回0如果打開，則返回負(fù)值。

function updateNav(event) {TweenMax.set([nav, logo, nav_trigger], { x: container._gsTransform.x }); }

這是另一個(gè)實(shí)用程序函數(shù)，每次onDrag或onThrowUpdate事件發(fā)生時(shí)， onDrag .set()方法的數(shù)組參數(shù)內(nèi)的目標(biāo)的x坐標(biāo)設(shè)置為容器的x位置。 這是Draggable對(duì)象實(shí)例的一部分。

function enableSelect() {container.onselectstart = null; // Fires when the object is being selected.TweenMax.set(container, { userSelect: 'text' }); }function disableSelect() {TweenMax.set(container, { userSelect: 'none' }); }function isSelecting() {// window.getSelection: Returns a Selection object representing// the range of text selected by the user or the current position// of the caret.return !!window.getSelection().toString().length; }

這些功能有助于確定某人是否真的在選擇文本，以便在某人在屏幕上拖動(dòng)時(shí)啟用/禁用選擇功能。 對(duì)于鼠標(biāo)事件，這不是最理想的行為，但是正如我們已經(jīng)提到的，您再也無(wú)法檢測(cè)到觸摸屏。

可拖動(dòng)實(shí)例

Draggable.create([targets], {options})

正如我們?cè)谏弦槐居嘘P(guān)Draggable的教程中所討論的那樣，這將創(chuàng)建Draggable對(duì)象的實(shí)例，并定位我們選擇的DOM對(duì)象，這些對(duì)象可以作為數(shù)組傳遞。

Draggable.create([container], {type: 'x',dragClickables: false,throwProps: true,dragResistance: 0.025,edgeResistance: 0.99999999,maxDuration: 0.25,throwResistance: 2000,cursor: 'resize',allowEventDefault: true,bounds: {…},onDrag: updateNav,onDragEnd: function(event) {…},liveSnap: function(value) {…},onPress: function(event) {…},onClick: function(event) {…},onThrowUpdate: function() {…} });

這是我們整個(gè)Draggable實(shí)例以及所使用的屬性。 實(shí)際的演示代碼包含我留下的注釋，以便理解并更好地了解每個(gè)人的職責(zé)。 我鼓勵(lì)您研究演示代碼，甚至挑戰(zhàn)您解構(gòu)其原因和方式。

這么長(zhǎng)，但不見得再見

這是我們GreenSock旅程的結(jié)束，希望您在此過(guò)程中學(xué)到很多。 特別感謝GreenSock的Jack和Carl，以及整個(gè)GreenSock社區(qū)，他們?cè)谡麄€(gè)系列中都提供了令人難以置信的幫助。 最后但并非最不重要的一點(diǎn)是，非常感謝讀者，讀者們本系列的結(jié)尾。 恭喜！ 我希望本系列文章有助于更好地了解真棒JavaScript動(dòng)畫庫(kù)的強(qiáng)大功能和功能。 建立很棒的東西并保持創(chuàng)造力！

翻譯自: https://webdesign.tutsplus.com/tutorials/completing-our-draggable-off-canvas-menu-with-greensock--cms-24796

greensock下載

總結(jié)

以上是生活随笔為你收集整理的greensock下载_使用GreenSock完成我们的可拖动的画布外菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。