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

Question

我希望更改不透明度，然后在向上滑动达到特定阈值时完全隐藏 div，如以下视频或 Photoswipe 中所示:

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

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

Answer 1

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

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

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

1. 检测元素上的 pointerdown 并允许使用 setPointerCapture() 在元素外部使用指针。
2. 检测元素上的pointermove。如果鼠标/触摸向上移动，则元素也向上移动。 (我还限制了向左、向右、向下的移动，但你不必这样做)
3. 检测到 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 ，所以您可能想在那里阅读更多内容。