javascript - CSS/JS : Change opacity on swipe

Question

我想在元素上滑动时更改其不透明度。

我想实现一个类似于代码片段中的动画，它会根据我的手指/光标在滑动时拖动元素的程度逐渐应用。

编辑:动画与清除 Android 中的通知相同

• 我的第一个想法是处理拖动事件并根据元素的位置和屏幕宽度更改不透明度。这是一个好的解决方案吗？有没有更好的，也许只有 CSS？

我正在使用 ionic(我的元素是一个 ion-item)，所以任何与 ionic/angular1 相关的东西都可以。

div.animated {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 31px;
    animation: right 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

.back {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    position: fixed;
    top: 30px;
    left: 50px;
}

@keyframes right {
    0% {
       left: 0px;
       opacity: 0.1;
    }
    50% { opacity: 1;}
    100% {left: 100px;opacity:0.1}
}

The blue frame is the screen and the red square is the dragged element
<div class="animated"></div>
<div class="back"></div>

Answer 1

google chrome 开发人员非常友善的人进行了展示电话 SuperCharged该节目背后的想法是向您展示制作网络应用效果的快速简单方法。

他们做了一个episode (大约一个小时)关于可刷卡，他们快速进行了 10 分钟 episode只是为了给你基本的想法。

要回答您的问题，javascript 是使其响应的唯一方法，CSS 不会响应用户输入或操作。

此外，在屏幕上移动内容时，最好使用 transform，而不是 left。他们在展示期间非常详细地解释了原因，但快速的原因是转换可以使用 GPU。

无论如何，这是他们在剧集中制作的代码的现场演示，看一眼，看看它是否是您要找的。无论如何，我建议您观看他们的视频，您可以学到很多东西(我确实做到了)。

/**
 Copyright 2016 Google Inc. All rights reserved.
 Licensed under the Apache License, Version 2.0 (the "License");
 */

'use strict';

class Cards {
  constructor() {
    this.cards = Array.from(document.querySelectorAll('.card'));

    this.onStart = this.onStart.bind(this);
    this.onMove = this.onMove.bind(this);
    this.onEnd = this.onEnd.bind(this);
    this.update = this.update.bind(this);
    this.targetBCR = null;
    this.target = null;
    this.startX = 0;
    this.currentX = 0;
    this.screenX = 0;
    this.targetX = 0;
    this.draggingCard = false;

    this.addEventListeners();

    requestAnimationFrame(this.update);
  }

  addEventListeners() {
    document.addEventListener('touchstart', this.onStart);
    document.addEventListener('touchmove', this.onMove);
    document.addEventListener('touchend', this.onEnd);

    document.addEventListener('mousedown', this.onStart);
    document.addEventListener('mousemove', this.onMove);
    document.addEventListener('mouseup', this.onEnd);
  }

  onStart(evt) {
    if (this.target)
      return;

    if (!evt.target.classList.contains('card'))
      return;

    this.target = evt.target;
    this.targetBCR = this.target.getBoundingClientRect();

    this.startX = evt.pageX || evt.touches[0].pageX;
    this.currentX = this.startX;

    this.draggingCard = true;
    this.target.style.willChange = 'transform';

    evt.preventDefault();
  }

  onMove(evt) {
    if (!this.target)
      return;

    this.currentX = evt.pageX || evt.touches[0].pageX;
  }

  onEnd(evt) {
    if (!this.target)
      return;

    this.targetX = 0;
    let screenX = this.currentX - this.startX;
    if (Math.abs(screenX) > this.targetBCR.width * 0.35) {
      this.targetX = (screenX > 0) ? this.targetBCR.width : -this.targetBCR.width;
    }

    this.draggingCard = false;
  }

  update() {

    requestAnimationFrame(this.update);

    if (!this.target)
      return;

    if (this.draggingCard) {
      this.screenX = this.currentX - this.startX;
    } else {
      this.screenX += (this.targetX - this.screenX) / 4;
    }

    const normalizedDragDistance =
      (Math.abs(this.screenX) / this.targetBCR.width);
    const opacity = 1 - Math.pow(normalizedDragDistance, 3);

    this.target.style.transform = `translateX(${this.screenX}px)`;
    this.target.style.opacity = opacity;

    // User has finished dragging.
    if (this.draggingCard)
      return;

    const isNearlyAtStart = (Math.abs(this.screenX) < 0.1);
    const isNearlyInvisible = (opacity < 0.01);

    // If the card is nearly gone.
    if (isNearlyInvisible) {

      // Bail if there's no target or it's not attached to a parent anymore.
      if (!this.target || !this.target.parentNode)
        return;

      this.target.parentNode.removeChild(this.target);

      const targetIndex = this.cards.indexOf(this.target);
      this.cards.splice(targetIndex, 1);

      // Slide all the other cards.
      this.animateOtherCardsIntoPosition(targetIndex);

    } else if (isNearlyAtStart) {
      this.resetTarget();
    }
  }

  animateOtherCardsIntoPosition(startIndex) {
    // If removed card was the last one, there is nothing to animate. Remove target.
    if (startIndex === this.cards.length) {
      this.resetTarget();
      return;
    }

    const frames = [{
      transform: `translateY(${this.targetBCR.height + 20}px)`
    }, {
      transform: 'none'
    }];
    const options = {
      easing: 'cubic-bezier(0,0,0.31,1)',
      duration: 150
    };
    const onAnimationComplete = () => this.resetTarget();

    for (let i = startIndex; i < this.cards.length; i++) {
      const card = this.cards[i];

      // Move the card down then slide it up.
      card
        .animate(frames, options)
        .addEventListener('finish', onAnimationComplete);
    }
  }

  resetTarget() {
    if (!this.target)
      return;

    this.target.style.willChange = 'initial';
    this.target.style.transform = 'none';
    this.target = null;
  }
}

window.addEventListener('load', () => new Cards());

/**
 Copyright 2016 Google Inc. All rights reserved. 
 Licensed under the Apache License, Version 2.0 (the "License");
 */

html,
body {
  margin: 0;
  padding: 0;
  background: #FAFAFA;
  font-family: Arial;
  font-size: 30px;
  color: #333;
}
* {
  box-sizing: border-box;
}
.card-container {
  width: 100%;
  max-width: 450px;
  padding: 16px;
  margin: 0 auto;
}
.card {
  background: #FFF;
  border-radius: 3px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
  margin: 20px 0;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
}

<!-- 
https://github.com/GoogleChrome/ui-element-samples/tree/master/swipeable-cards

https://www.youtube.com/watch?v=rBSY7BOYRo4

/**
 *
 * Copyright 2016 Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->

<div class="card-container">
  <div class="card">Das Surma</div>
  <div class="card">Aerotwist</div>
  <div class="card">Kinlanimus Maximus</div>
  <div class="card">Addyoooooooooo</div>
  <div class="card">Gaunty McGaunty Gaunt</div>
  <div class="card">Jack Archibungle</div>
  <div class="card">Sam "The Dutts" Dutton</div>
</div>