我試著創建像下圖這樣的飛行的心。當用戶點擊心形圖標時，會有一個飛行的心形在任意的x和y位置飛出，然后在某個時間消失。類似Instagram live的東西。

如何讓追加的div，無縫平滑的消失

import React, { useState } from "react";

const MyComponent = () => {
  const [divs, setDivs] = useState([]);

  const addDiv = () => {
    const x = Math.floor(Math.random() * window.innerWidth);
    const y = Math.floor(Math.random() * window.innerHeight);
    const newDiv = (
      <div
        className="animated-div"
        style={{ position: "absolute", left: x, top: y }}
      >
        <svg
          aria-hidden="true"
          focusable="false"
          data-prefix="fas"
          data-icon="heart"
          className="svg-inline--fa fa-heart fa-w-16"
          width="100%"
          height="100%"
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
          preserveAspectRatio="none"
        >
          <path
            fill="#f67280"
            d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"
          />
        </svg>
      </div>
    );

    setDivs([...divs, newDiv]);
  };

  return (
    <div>
      <button onClick={addDiv}>Add Div</button>
      <div className="container">{divs}</div>
    </div>
  );
};

export default MyComponent;

.animated-div {
  height: 50px;
  width: 50px;
  animation: fly-in 0.3s ease-out forwards;
  color: white;
  font-size: 1em;
  padding: 10px;
}

@keyframes fly-in {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

我創建了一個例子，您可以使用for循環添加幾個heart元素。通過為每個心形設置不同的animationDelay值，這些心形元素可以單獨設置動畫。

function FlyingHearts() {

  const createHeartContainer = () => {
    const hearts = []
    for (let i = 0; i <= 10; i++) {
      const mydelay = {  animationDelay : (i*0.3) + `s`} 
      
      hearts.push(<div className="heart" style={mydelay} key={i}>??</div>)
    }

    return (<div>{ hearts }</div>)
  };
  
  return (
    <div>
      <div>
        {createHeartContainer()}
      </div>
    </div>
  );
}

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.heart {
  position:absolute;
  bottom:20px;
  animation:fly-in 2s ease-out forwards;
  opacity:0;
}
@keyframes fly-in {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  to {
    transform: translateY(-100vh);
    opacity: 1;
  }
}

JSFiddle: https://jsfiddle.net/3vf9mqcj/