gpt4 book ai didi

javascript - 尝试在 javascript 中变形 SVG

转载 作者:行者123 更新时间:2023-12-02 19:30:04 25 4
gpt4 key购买 nike

我正在尝试使用一些卡片进行布局,单击这些卡片会打开以显示更多信息,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 脚本,确实是。

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

最佳答案

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

我建议 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>

关于javascript - 尝试在 javascript 中变形 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61967895/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com