greensock下载_使用GreenSock完成我们的可拖动的画布外菜单

greensock下载

在此Draggable旅程的第一部分中，我们讨论了如何包括脚本，研究了ThrowPropsPlugin，包括了启动我们的项目的要求，希望将其发展到11​​个！ 现在，准备制作一个可以对键盘和触摸做出React的非画布菜单系统。

演示

我们将在本教程其余部分中构建和讨论的完整演示也可以在CodePen上获得。

我鼓励您在尽可能多的设备上进行此项测试，尤其是键盘导航。 每次交互（无论是触摸，键盘还是鼠标）都已考虑在内，但是正如您在我们当前的情况中所发现的那样， 您无法检测到触摸屏 ，有时甚至尝试这样做都会导致误报 。

设置

使用第一部分中的标记，我们将首先添加一个用于结构目的的容器div以及用于CSS和JavaScript钩子的相关类。

   
   

  
    
    

    
     
     …
    
     
     …
    
     
     

      
      …
     
     
  
    
    

  
    
    
    
     
     

  
    
    

   
   

以“ js”前缀开头的类表示这些类仅出现在JavaScript中； 删除它们会妨碍功能。 它们从未在CSS中使用过，从而有助于隔离关注点。 周围的容器将有助于控制滚动行为，这将在后面CSS部分中讨论。

辅助功能

有了适当的基础之后，就该在顶部添加ARIA层以为屏幕阅读器和键盘用户提供语义含义了。

   
   

    
    …
   
   

由于默认情况下菜单将被隐藏，因此aria-hidden属性被标记为true ，并将根据菜单的状态进行相应的更新。 对于打开为false ，对于关闭为true 。 这是根据W3C规范对aria-hidden属性的说明：

表示该元素及其所有后代对作者所实现的任何用户都不可见或不可感知。 […]作者必须在未显示的内容上设置aria-hidden =“ true”，无论隐藏它的机制如何。 这使辅助技术或用户代理可以正确跳过文档中的隐藏元素。 〜W3C WAI-ARIA规格

作者应注意隐藏的内容，从而使此属性成为本文讨论范围之外的单独讨论。 对于那些好奇的人，规范进一步定义了属性，并且有些古怪。 关于规范术语，我通常不会这么说。

CSS

我们CSS是魔术真正开始的地方。 让我们从演示中获取有意义的重要部分并对其进行分解。

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

将主体高度设置为100％可以使容器拉伸整个视口，但它也起着更重要的作用。 让我们隐藏它的溢出。

溢出滚动修补程序有助于控制主容器和导航中的任何一个包含溢出内容时的行为。 例如，如果容器已滚动（或菜单），则当用户到达初始滚动元素的末尾时，另一个容器将不会滚动。 这是一种怪异的行为，通常不会讨论，但是会带来更好的用户体验。

视口单位

视口单元功能非常强大，并且在主容器如何容纳溢出内容方面起着至关重要的作用。 如今，视口单元在各种浏览器中都具有出色的支持 ，我强烈建议您开始使用它们。 我在导航上使用了vh单位，但我可以改用百分比。 在开发过程中，发现div.app必须使用vh单位，因为百分比不允许溢出的内容保持典型的滚动行为； 内容导致被剪切。 如果菜单项超出了菜单的高度或视口的高度变窄，则可以设置溢出来进行scroll准备。

// 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是否失败或已关闭，因此我们将ID值添加到菜单触发器的href属性的原因。

主导航通过负边距向右移动，该负边距也与导航宽度相同。 为了简洁起见，我正在编写Vanilla CSS，但是我敢肯定，您可以在自己选择的预处理器中写一些更奇特的东西。

JavaScript

JavaScript是此可拖动菜单之旅的最后一站，但是在编写一行JS之前，我们需要编写模块模式设置。

var dragaebelMenu = (function() {
  function doSomething() {…}
  return {
    init: function() {…}
  }
})();

dragaebelMenu.init(); // start it!

变数

对于配置设置，我们将定义一些变量以供将来参考。

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目标的最后两个变量以及导航菜单的宽度之外，这些变量中的大多数只是在获取DOM元素。 实用程序功能getScrollBarWidth() （今天在我们的讨论之外）检索滚动条的宽度，以便我们可以将导航栏定位在刚超出其自身宽度的位置，以便在菜单打开时看到它。 目标是菜单打开时我们移动的对象，以允许推送相邻的内容。

方法

为了简短起见，我将仅讨论对菜单行为的功能极为重要的方法。 在演示中没有看到的所有其他内容都是“糖在上面”的东西，它使菜单更加强大。

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功能检测容器的x坐标是否等于封闭的导航状态。 如果是这样，则将目标设置回其初始位置，否则将其设置到打开位置。

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

这是一个用于检查菜单状态的实用程序功能。 如果关闭菜单，则返回0如果打开，则返回负值。

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

这是另一个实用程序函数，每次onDrag或onThrowUpdate事件发生时， onDrag .set()方法的数组参数内的目标的x坐标设置为容器的x位置。 这是Draggable对象实例的一部分。

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;
}

这些功能有助于确定某人是否真的在选择文本，以便在某人在屏幕上拖动时启用/禁用选择功能。 对于鼠标事件，这不是最理想的行为，但是正如我们已经提到的，您再也无法检测到触摸屏。

可拖动实例

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

正如我们在上一本有关Draggable的教程中所讨论的那样，这将创建Draggable对象的实例，并定位我们选择的DOM对象，这些对象可以作为数组传递。

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() {…}
});

这是我们整个Draggable实例以及所使用的属性。 实际的演示代码包含我留下的注释，以便理解并更好地了解每个人的职责。 我鼓励您研究演示代码，甚至挑战您解构其原因和方式。

这么长，但不见得再见

这是我们GreenSock旅程的结束，希望您在此过程中学到很多。 特别感谢GreenSock的Jack和Carl，以及整个GreenSock社区，他们在整个系列中都提供了令人难以置信的帮助。 最后但并非最不重要的一点是，非常感谢读者，读者们本系列的结尾。 恭喜！ 我希望本系列文章有助于更好地了解真棒JavaScript动画库的强大功能和功能。 建立很棒的东西并保持创造力！

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

greensock下载