我的问题是牌不是按顺序翻转的
this is my code in tsx:import { useState } from 'react';
// import tw from 'tailwindcss'
const LandingPage = () => {
const [isHovering, setIsHovering] = useState(false);
const handleMouseEnter = () => {
setIsHovering(true);
};
const handleMouseLeave = () => {
setIsHovering(false);
};
const tablets ={
front: ["F","r","a","n","c","o"," ","A",".","M","a","r","c","u","z","z","i"," "],
back: ["D","e","v","e","l","o","p","e","r"," ","B","a","c","k","e","n","d"," "],
}
return (
<section id="home">
<div className="container mx-auto flex px-10 py-20 md:flex-row flex-col bg-black">
<div className="bg-slate-800 flex-grow w-full flex items-center justify-center flex-col group"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}>
<div className="grid grid-cols-9 gap-1 my-4 w-full text-center font-extrabold font text-3xl lg:text-6xl sm:text-6xl md:text-4xl">
{tablets.front.map((e, index) => (
<div className={`relative bg-red-800 transform transition ease-in-out hadow-xl shadow-black/40 ${isHovering ? `group-hover:[transform:rotateY(180deg)] duration-1000` : ''}`} key={index}>
<div className="bg-red-800 p-2 ">{e}</div>
<div className={`absolute top-0 left-0 w-full h-full bg-blue-500 p-2 text-white transform transition ease-in-out group-hover:[transform:rotateY(180deg)] ${isHovering ? `delay-${index}` : `opacity-0 delay-${index} ` }`}>
{/* <p>{tablets.variablesDelay[index]}</p> */}
<p>{tablets.back[index]}</p>
</div>
</div>
))}
</div>
</div>这是我在tailwin.config中的代码：
/** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin");
const Myclass = plugin(function ({ addUtilities }) {
addUtilities({
".my-rotate-y-180": {},
});
});
const animationDelay = plugin(
function ({ matchUtilities, theme }) {
matchUtilities(
{
delay: (value) => {
return {
"transition-delay": value,
};
},
},
{
values: theme("animationDelay"),
}
);
},
{
theme: {
animationDelay: {
0: "0ms",
1: "200ms",
2: "400ms",
3: "600ms",
4: "800ms",
5: "1000ms",
6: "1200ms",
7: "1400ms",
8: "1600ms",
9: "1800ms",
10: "2000ms",
11: "2200ms",
12: "2400ms",
13: "2600ms",
14: "2800ms",
15: "3000ms",
16: "3200ms",
17: "3400ms",
},
},
}
);我尝试在className=“delay-${index}”中传递一个变量
我用它来访问每张卡片的索引并确定每张卡片的延迟
但它不工作在任何顺序轮流
请帮帮我！！！
我是新的顺风和tsx
1条答案
按热度按时间qmb5sa221#
你基本上已经做到了这一点。我删除了不需要的鼠标事件处理程序。这些处理程序会导致与CSS hover属性发生冲突，而CSS hover属性是你在父级上使用组正确设置的。请记住Tailwind，你的类需要在你的源代码中。避免使用JS进行类操作。
另一个小改动是移除不透明度，使用背面可见性，以及移除第二个悬停变换。这样想吧，当你悬停在父级上时，卡片会翻转，当你不在父级上时，它们会处于默认状态。所以你不需要尝试通过在卡片背面变换来强制卡片回到初始状态。
此外，你实际上并不需要在你的配置中添加所有这些动画延迟。它看起来真的很死板，如果你想加快或减慢速度，更新所有这些延迟将是一件痛苦的事情。相反，使用CSS自定义属性。然后，您可以在样式中为每个字母卡元素单独设置该变量。这使得更改一个值以根据您的喜好调整速度变得非常容易。
工作片段：