更改不透明度然后在向上滑动时隐藏 (CSS / JS)

Question

我想改变不透明度，然后在向上滑动达到特定阈值时完全隐藏 div，例如下面的视频或 Photoswipe:

https://www.loom.com/share/29741bdadc7846bfbc747d3870815340

不幸的是，大多数关闭的库只允许注册实际的事件开始和结束，而不是滑动像素的数量。如何获取实际滑动距离并将其连接到滑动事件？

Answer 1

有很多事件监听器和计算属性；我使用 W3 的可拖动功能制作了一个快速代码笔，但自己添加了不透明度更改：

// Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    //change background opacity:
    const background = document.getElementById("background");
    const bgHeight = background.offsetHeight;
    const elmntHeight = elmnt.offsetHeight;
    const adjustedBottom = bgHeight - elmntHeight;
    const percentage = 1 - elmnt.offsetTop / adjustedBottom; 
    console.log(percentage)
    
    background.style.opacity = percentage;
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

body {
  margin: 0;
}

#background {
  background: black;
  width: 100vw;
  height: 100vh; 
  position: absolute;
}

#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

<div id="background"></div>
<!-- Draggable DIV -->
<div id="mydiv">
  <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
  <div id="mydivheader">Click here to move</div>
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
  </div>
</div>

远非完美，但希望展示一个可以扩展的想法。

Answer 2

Note: You can apply the animations used in this example on other elements like an overlay instead. The technique is the same.

这里是一些代码，用于向上移动一个元素，使其淡出并从显示中移除。请注意，我只实现了 PointerEvent-api。您还应该实施回退。

关于正在发生的事情的总结：

在元素上检测到一个pointerdown，并允许指针在元素外部使用setPointerCapture()。
在元素上检测到 pointermove。如果 mouse/touch 向上移动，则元素也向上移动。（我还限制了向左、向右、向下的移动，但你不必这样做）
检测到 pointerup。在 releasePointerCapture() 之后，指针将再次仅在默认元素中可用，而不是在默认元素之外。根据元素向上移动的量，元素返回到其原始位置或以动画方式退出。

class SwipeOutBehaviour {
  constructor(element) {
    this.element = element;
    this.dy = null;
    this.initial_y = null;
    this.animation_frame_state = 'completed';

    if( window.PointerEvent ) { 
      this.element.addEventListener('pointerdown', this.start_drag.bind(this), true);     
      this.element.addEventListener('pointermove', this.drag.bind(this), true);
      this.element.addEventListener('pointerup', this.drag_end.bind(this), true);
    } else {
    //should use composition instead if you re serious, for this example I only implemented PointerEvent some browsers will use Tpuchevent and MouseEvent
    }
  }

  start_drag( event ){
    event.preventDefault();
      // only respond to a single touch
      if( event.touches && event.touches.length > 1 ) return;
      // allow pointerevents outside the target
      event.target.setPointerCapture(event.pointerId);
      // set initial pos
      this.initial_y = ( event.targetTouches ) ? event.targetTouches[0].clientY : event.clientY;
  }
  drag( event ){
    event.preventDefault();
    
    if( this.initial_y === null ) return;
    if( this.animation_frame_state === 'pending' ) return;

    this.dy = ( event.targetTouches ) ? Math.floor( event.targetTouches[0].clientY - this.initial_y ) : Math.floor( event.clientY - this.initial_y );
    
    if( this.dy > 0 ) return;
    this.animation_frame_state = 'pending'
    window.requestAnimationFrame( () => {
      this.element.style.transform = `translateY(${this.dy}px)`
      this.animation_frame_state = 'completed';
    });
  }
  drag_end(event) {
    event.preventDefault();
        
    if(event.touches && event.touches.length > 0) return;
    
    event.target.releasePointerCapture(event.pointerId);
    if( this.dy < -100 ) {
      window.requestAnimationFrame( () => {
        this.element.style.transition = 'opacity 500ms, translateY 200ms';
        this.element.style.transform = `translateY(-175px)`;
        this.element.style.opacity = `0`;
        this.animation_frame_state = 'completed';
        window.setTimeout( () => {
          // set display to none, you could remove it from the DOM instead
          this.element.style.display = 'none';
        }, 500)
      });
    } else {
      window.requestAnimationFrame( () => {
        this.element.style.transform = `translateY(0px)`
        this.animation_frame_state = 'completed';
      });  
    }
    this.initial_y = null;
  }
}

let element = document.getElementById('container');
new SwipeOutBehaviour( element );

  #container {
    margin: auto;
    width: 150px;
    height: 150px;
    border: 1px solid black;
  }
  #box-of-doom {
    margin: auto;
    width: 200px;
    height: 200px;
    border: 1px solid red;
    background: orange;
  }
  p {
    text-align: center;
  }

<p>Drag the item in the box of doom<p>
<div id='box-of-doom'>
  <p>The box of doom<p>
</div>
<div id='container'>
  <img alt='a placeholder' src='https://via.placeholder.com/150' />
</div>

注意：此答案的灵感来自 this documentation/article from Google about touch events，因此您可能想在那里阅读更多内容。

更改不透明度然后在向上滑动时隐藏 (CSS / JS)

Change opacity then hide on swipe up (CSS / JS)

javascript

css

swipe