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

如何解决想要一个按钮来触发卡片示例的拖动动画translateX

关于以下示例：

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

我想要类似火种的功能，在其中我可以触发与拖动相同的过渡。

我试图添加喜欢和不喜欢的按钮功能，例如tinder，但是由于按钮不是useSprings props循环的一部分，因此很难对齐应该转换的卡片。我希望喜欢或不喜欢的按钮与useDrag进行通信以触发拖动，我尝试通过useState进行切换并作为useDrag的参数进行传递，并在按钮上设置了set（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;

解决方法

需要精通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)";
  }

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