我想要一个按钮来触发卡片的拖动动画(translateX)示例

Question

它是关于以下示例的：

https://codesandbox.io/s/cards-forked-4bcix?file=/src/index.js

我想要一个火柴式的功能，在那里我可以触发与拖动相同的过渡。

我正在尝试添加喜欢和不喜欢按钮的功能，比如tinder，但是因为按钮不是useSprings属性循环的一部分，所以很难对齐我应该转换哪张卡。我想要喜欢或不喜欢按钮来与useDrag通信以触发拖动，我尝试通过useState切换并作为useDrag的参数传递，以及设置(x:1000，y:0)的按钮上的onClick处理程序，但这会删除所有的卡。

我花了一整天的时间来弄清楚，而且我需要很快交付东西，请帮助将是伟大的！下面是代码，我使用的是Next.js

import React, { useState, useRef } from "react";
import { useSprings, animated } from "react-spring";
import { useDrag } from "react-use-gesture";

const Try: React.SFC = () => {
  const cards = [
    "https://upload.wikimedia.org/wikipedia/en/5/53/RWS_Tarot_16_Tower.jpg",
    "https://upload.wikimedia.org/wikipedia/en/9/9b/RWS_Tarot_07_Chariot.jpg",
    "https://upload.wikimedia.org/wikipedia/en/d/db/RWS_Tarot_06_Lovers.jpg",
    // "https://upload.wikimedia.org/wikipedia/en/thumb/8/88/RWS_Tarot_02_High_Priestess.jpg/690px-RWS_Tarot_02_High_Priestess.jpg",
    "https://upload.wikimedia.org/wikipedia/en/d/de/RWS_Tarot_01_Magician.jpg",
  ];
  const [hasLiked, setHasLiked] = useState(false);

  const [props, set] = useSprings(cards.length, (i) => ({
    x: 0,
    y: 0,
  }));
  const [gone, setGone] = useState(() => new Set()); // The set flags all the cards that are flicked out
  const itemsRef = useRef([]);

  const bind = useDrag(
    ({
      args: [index, hasLiked],
      down,
      movement: [mx],
      distance,
      direction: [xDir],
      velocity,
    }) => {
      const trigger = velocity > 0.2;
      const dir = xDir < 0 ? -1 : 1;
      if (!down && trigger) gone.add(index); // If button/finger's up and trigger velocity is reached, we flag the card ready to fly out
      set((i) => {
        if (index !== i) return; // We're only interested in changing spring-data for the current spring
        const isGone = gone.has(index);
        const x = isGone ? (200 + window.innerWidth) * dir : down ? mx : 0; // When a card is gone it flys out left or right, otherwise goes back to zero
        const rot = mx / 100 + (isGone ? dir * 10 * velocity : 0); // How much the card tilts, flicking it harder makes it rotate faster
        const scale = down ? 1.1 : 1; // Active cards lift up a bit
        return {
          x,
          rot,
          scale,
          delay: undefined,
          config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 },
        };
      });
      if (!down && gone.size === cards.length)
        setTimeout(() => gone.clear(), 600);
    }
  );
  console.log(gone);
  function handleLikeButtonClick(e) {
    gone.add(1);
  }

  function handleDisLikeButtonClick(e) {
    set({ x: -1000, y: 0 });
  }

  return (
    <>
      <div id="deckContainer">
        {props.map(({ x, y }, i) => (
          <animated.div
            {...bind(i, hasLiked)}
            key={i}
            style={{
              x,
              y,
            }}
            ref={(el) => (itemsRef.current[i] = el)}
          >
            <img src={`${cards[i]}`} />
          </animated.div>
        ))}
      </div>
      <div className="buttonsContainer">
        <button onClick={(e) => handleLikeButtonClick(e)}>Like</button>
        <button onClick={(e) => handleDisLikeButtonClick(e)}>Dislike</button>
      </div>
      <style jsx>{`
        .buttonsContainer {
          background-color: tomato;
        }
        #deckContainer {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100vw;
          height: 100vh;
          position: relative;
        }
      `}</style>
    </>
  );
};

export default Try;

Answer 1

done需要聪明地使用js：

  function handleLikeButtonClick(e) {
    let untransformedCards = [];
    
    //loop through all cards and add ones who still have not been transformed
    [].forEach.call(itemsRef.current, (p) => {
      if (p.style.transform == "none") {
        untransformedCards.push(p);
      }
    });
   // add transform property to the latest card
    untransformedCards[untransformedCards.length - 1].style.transform =
      "translate3d(1000px, 0 ,0)";
  }

  function handleDisLikeButtonClick(e) {
    let untransformedCards = [];

    [].forEach.call(itemsRef.current, (p) => {
      if (p.style.transform == "none") {
        untransformedCards.push(p);
      }
    });
    untransformedCards[untransformedCards.length - 1].style.transform =
      "translate3d(-1000px, 0 ,0)";
  }