javascript - 尝试在 javascript 中变形 SVG

Question

我正在尝试使用一些卡片进行布局，单击这些卡片会打开以显示更多信息，like you can see in this image .我设法使大部分内容正常工作，但我无法让左侧的小横幅变成打开状态。据我所知，解决这个问题的最佳方法是使用 anime.js，但由于某种原因它不起作用。这是代码:

let cardToggle = document.querySelectorAll('.card-toggle');

for (i = 0; i < cardToggle.length; i++) {
  cardToggle[i].addEventListener("click", function() {

    //Get the required elements
    let cardContent = this.nextElementSibling;
    let cardBackground = this.parentElement;
    let metaWrapper = this.querySelector('.spell-meta-wraper');
    let spellBanner = this.querySelector('.spell-banner');
    //spellBanner is the svg I'm trying to animate

    //Close
    if (cardContent.style.display === "block") {

      cardContent.style.display = "none";
      metaWrapper.style.display = "none";
      cardContent.style.height = "0px";
      cardBackground.style.height = "95px";

    //Open
    } else {

      cardContent.style.display = "block";
      metaWrapper.style.display = "block";
      cardContent.style.height = "410px";
      cardBackground.style.height = "505px";
      anime({
        targets: spellBanner,
        points: [
          { value: 'M0,0h47v156l-23.5-21.14L0,156V0z' }
        ],
        easing: 'easeOutQuad',
        duration: 2000,
        loop: true
      });
    }
  });
}

指出我正在尝试在 wordpress 中执行此操作并且我正在尝试编辑的卡片来自 while 循环可能会很有用。

我曾尝试将“points”属性更改为“d”，但没有成功。我还测试了“spellBanner”变量，看它是否引用了正确的元素，确实如此。我还检查了页面的源代码，看看 wordpress 是否正在加载 anime.min.js 脚本，确实是。

我不知道我做错了什么或者我有什么替代方案来解决这个问题。

Answer 1

还有很多代码用于一个小功能。

我建议 SVG <path> + CSS transition用于变形路径(d 属性)。

(为避免重复 path 声明，您可以使用 CSS 变量或 SASS 变量。)

path {
  d: path("M0,0h50v140l-25-20L0,140V0z");
  transition: d .18s linear;
}

path:hover {
  d: path("M0,0h50v140l-25 20L0,140V0z");
}

<svg width="50" height="160"><path d=""/></svg>