如何使用帶有AnimeJS的forEach回圈播放mouseleave影片

當滑鼠離開每個專案時，我正在使用 Anime.js 為 SVG 設定影片。

我在一個回圈中有一個串列，每個串列的末尾都有一個 SVG。我的代碼的問題是，當懸停在每個專案上時，所有 SVG 都會同時進行影片處理。當我滑鼠離開每個專案時，我希望該函式能夠相對于懸停的專案分別為每個 SVG 設定影片。

我不知道我做錯了什么，但我已經被困了幾個小時。

我可以簡單地使用 CSS 進行影片處理，但是如果不使用庫就很難按照我的意愿對 SVG 路徑進行影片處理。

這是我的代碼：

let hoverItem = document.querySelectorAll(".item");

hoverItem.forEach((line) => {
  line.addEventListener("mouseleave", function () {
    anime
      .timeline({
        loop: false
      })
      .add({
        targets: "path",
        d: [
          { value: "M 10 80 Q 645 128 1290 80" },
          { value: "M 10 80 Q 645 11 1290 80" },
          { value: "M 10 80 Q 645 121 1290 80" },
          { value: "M 10 80 Q 645 34 1290 80" },
          { value: "M 10 80 Q 645 102 1290 80" },
          { value: "M 10 80 Q 645 65 1290 80" },
          { value: "M 10 80 Q 645 80 1290 80" }
        ],
        easing: "easeOutElastic(1, .6)",
        duration: 600
      });
  });
});

<ul>

  <li class="item">
    <div class="title">TITLE</div>
    <svg width="1290" height="110" viewBox="0 0 1290 110">
      <path d="M 10 80 Q 640 80 1290 80" stroke-width="1.5" stroke="#D7C9B8" fill="transparent" />
    </svg>
  </li>

  <li class="item">
    <div class="title">TITLE</div>
    <svg width="1290" height="110" viewBox="0 0 1290 110">
      <path d="M 10 80 Q 640 80 1290 80" stroke-width="1.5" stroke="#D7C9B8" fill="transparent" />
    </svg>
  </li>

  <li class="item">
    <div class="title">TITLE</div>
    <svg width="1290" height="110" viewBox="0 0 1290 110">
      <path d="M 10 80 Q 640 80 1290 80" stroke-width="1.5" stroke="#D7C9B8" fill="transparent" />
    </svg>
  </li>

</ul>

任何幫助，將不勝感激。

uj5u.com熱心網友回復：

要執行您需要的操作，您需要將targets屬性設定為path與.item引發mouseleave事件的相關。

為此，您可以.item從傳遞給事件處理的事件物件中獲取對元素的參考，然后querySelector()獲取相關的path.

let hoverItem = document.querySelectorAll(".item");

hoverItem.forEach((line) => {
  line.addEventListener("mouseleave", function(e) {
    anime.timeline({
      loop: false
    }).add({
      targets: e.target.querySelector('path'),
      d: [{
        value: "M 10 80 Q 645 128 1290 80"
      }, {
        value: "M 10 80 Q 645 11 1290 80"
      }, {
        value: "M 10 80 Q 645 121 1290 80"
      }, {
        value: "M 10 80 Q 645 34 1290 80"
      }, {
        value: "M 10 80 Q 645 102 1290 80"
      }, {
        value: "M 10 80 Q 645 65 1290 80"
      }, {
        value: "M 10 80 Q 645 80 1290 80"
      }],
      easing: "easeOutElastic(1, .6)",
      duration: 600
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<ul>
  <li class="item">
    <div class="title">TITLE</div>
    <svg width="1290" height="110" viewBox="0 0 1290 110">
      <path d="M 10 80 Q 640 80 1290 80" stroke-width="1.5" stroke="#D7C9B8" fill="transparent" />
    </svg>
  </li>
  <li class="item">
    <div class="title">TITLE</div>
    <svg width="1290" height="110" viewBox="0 0 1290 110">
      <path d="M 10 80 Q 640 80 1290 80" stroke-width="1.5" stroke="#D7C9B8" fill="transparent" />
    </svg>
  </li>
  <li class="item">
    <div class="title">TITLE</div>
    <svg width="1290" height="110" viewBox="0 0 1290 110">
      <path d="M 10 80 Q 640 80 1290 80" stroke-width="1.5" stroke="#D7C9B8" fill="transparent" />
    </svg>
  </li>
</ul>

標籤：javascripthtml循环前锋动漫.js

上一篇：加速代碼。用核函式回圈求和

下一篇：將檔案復制到檔案夾中，然后使用檔案夾名稱的一部分重命名