當我點擊按鈕時，我試圖在卡片上獲得一個新聞動畫。我是通過在每次點擊按鈕時來回改變類名來做到這一點的。但是問題是單擊按鈕會改變map中所有元素的類名。有人知道我哪里搞砸了嗎？
如果您將鼠標懸停在肩牌上:
如果你點擊它，理想情況下，只有一張卡片應該顯示按下動畫，但這里所有的卡片都顯示動畫。
代碼如下:
const [chosenRoutine, setChosenRoutine] = useState("");
useEffect(() => {
setChosenRoutine("");
}, []);
<Stack
direction="row"
sx={{
justifyContent: "center",
gap: "80px",
flexWrap: "wrap",
}}>
{chosenRegimeData.routine.map((routine, index) => (
<Box
key={index}
sx={{
borderRadius: "30px",
}}>
<Box
className={classNames}
sx={{
display: "grid",
width: "400px",
height: "370px",
borderRadius: "30px",
p: "10px",
background: "rgba(10, 18, 38, 1)",
position: "relative",
}}>
<img
src={routine.image}
alt="image"
style={{
width: "100%",
height: "70%",
borderRadius: "30px",
}}
/>
<Stack
alignItems="center"
spacing={1}
sx={{
width: "100%",
background: "rgba(10, 18, 38, 1)",
position: "absolute",
bottom: "20px",
pt: "2px",
borderRadius: "30px",
}}>
<Typography
className="gradient-text-2"
sx={{
width: "100%",
color: "#fff",
textTransform: "capitalize",
textAlign: "center",
fontSize: "24px",
}}>
{routine.name}
</Typography>
<Stack direction="row" alignItems="center" spacing={2}>
<Button
size="large"
variant="outlined"
className="gradient-text-5"
onClick={() => {
setClassNames("pressed-2");
console.log("pressed", index);
setTimeout(() => {
setClassNames("increase-shadow-on-hover");
// showRoutineExercises(routine);
}, 300);
}}>
See Exercises in this Routine
</Button>
</Stack>
</Stack>
</Box>
</Box>
))}
</Stack>chosenRegimeData甲酸鹽
{
name: "calisthenics",
warmup: [
{
name: "neck rotations",
time: "20 seconds",
image: neckRotation,
},
{
name: "arm rotations",
time: "10 seconds",
image: armRotation,
},
{
name: "arm side swings",
time: "10 seconds",
image: armSideSwings,
},
{
name: "jumping jacks",
time: "10 seconds",
image: jumpingJacks,
},
{
name: "heel flicks",
time: "10 seconds",
image: heelFlicks,
},
{
name: "high knees",
time: "10 seconds",
image: highKnees,
},
{
name: "dynamic quad pull",
reps: "5 each side",
image: quadPull,
},
{
name: "toe hand touch",
reps: "10 each side",
image: toeHandTouch,
},
{
name: "wide stance side to side",
reps: "5 each side",
image: wideStanceSideToSide,
},
{
name: "wide stance forward bend",
reps: "10 each side",
image: wideStanceForwardBend,
},
],
routine: [
{
name: "chest and triceps",
image: chest,
exercise: [
{
name: "pushups",
sets: 3,
reps: 10,
image: pushups,
},
{
name: "diamond pushups",
sets: 3,
reps: 10,
image: diamondPushups,
},
{
name: "wide pushups",
sets: 3,
reps: 10,
image: widePushups,
},
{
name: "tricep dips",
sets: 3,
reps: 10,
image: tricepDips,
},
{
name: "tricep extensions",
sets: 3,
reps: 10,
image: tricepExtensions,
},
{
name: "decline pushups",
sets: 3,
reps: 10,
image: declinePushups,
},
{
name: "incline pushups",
sets: 3,
reps: 10,
image: inclinePushups,
},
{
name: "explosive pushups",
sets: 2,
reps: 10,
image: explosivePushups,
},
{
name: "archer pushups",
sets: 2,
reps: 4,
image: archerPushups,
},
],
},
{
name: "shoulders",
image: shoulders,
exercise: [
{
name: "pike pushups",
sets: 3,
reps: 10,
image: pikePushups,
},
{
name: "raised pike pushups",
sets: 3,
reps: 8,
image: raisedPikePushups,
},
{
name: "wall walk",
sets: 3,
reps: 10,
image: wallWalk,
},
{
name: "handstand against the wall",
sets: 3,
time: "20 seconds",
image: handstandAgainstWall,
},
{
name: "handstand pushups against wall",
sets: 3,
reps: 5,
image: handstand,
},
],
},
{
name: "back and biceps",
image: back,
exercise: [
{
name: "pullups",
sets: 3,
reps: 6,
image: pullups,
},
{
name: "chinups",
sets: 3,
reps: 6,
image: chinups,
},
{
name: "wide pullups",
sets: 3,
reps: 5,
image: widePullups,
},
{
name: "close grip pullups",
sets: 3,
reps: 5,
image: closeGripPullups,
},
{
name: "assisted pullups",
sets: 3,
reps: 7,
image: assistedPullups,
},
{
name: "assisted chinups",
sets: 3,
reps: 7,
image: assistedChinups,
},
{
name: "scapula shrugs",
sets: 3,
reps: 10,
image: scapulaShrugs,
},
{
name: "australian pullups",
sets: 3,
reps: 25,
image: australianPullups,
},
],
},
{
name: "legs",
image: legs,
exercise: [
{
name: "squats",
sets: 3,
reps: 50,
image: squats,
},
{
name: "lunges",
sets: 3,
reps: 50,
image: lunges,
},
{
name: "calf raises",
sets: 3,
reps: 50,
image: calfRaises,
},
{
name: "jump squats",
sets: 3,
reps: 20,
image: jumpSquats,
},
{
name: "jump lunges",
sets: 3,
reps: 20,
image: jumpLunges,
},
{
name: "pistol squats",
sets: 3,
reps: 5,
image: pistolSquats,
},
{
name: "single leg calf raises",
sets: 3,
reps: 20,
image: singleLegCalfRaises,
},
],
},
{
name: "core",
image: core,
exercise: [
{
name: "plank",
sets: 3,
time: "90 seconds",
image: plank,
},
{
name: "side plank",
sets: 3,
time: "60 seconds",
image: sidePlank,
},
{
name: "reverse plank",
sets: 3,
time: "60 seconds",
image: reversePlank,
},
{
name: "russian twists",
sets: 3,
reps: 40,
image: russianTwists,
},
{
name: "leg raises",
sets: 3,
reps: 40,
image: legRaises,
},
{
name: "bicycle crunches",
sets: 3,
reps: 40,
image: bicycleCrunches,
},
{
name: "flutter kicks",
sets: 3,
reps: 40,
image: flutterKicks,
},
{
name: "chair situps",
sets: 3,
reps: 40,
image: chairSitups,
},
{
name: "v situps",
sets: 3,
reps: 20,
image: vSitups,
},
{
name: "crucifix",
sets: 3,
reps: 20,
image: crucifix,
},
{
name: "side plank up and down",
sets: 3,
reps: 15,
image: sidePlankUpAndDown,
},
],
},
{
name: "cardio",
image: cardio,
exercise: [
{
name: "jumping jacks",
time: "45 seconds",
image: jumpingJacks,
},
{
name: "high knees",
time: "45 seconds",
image: highKnees,
},
{
name: "butt kicks",
time: "45 seconds",
image: heelFlicks,
},
{
name: "burpees",
reps: 10,
image: jumpingJacks,
},
{
name: "mountain climbers",
time: "45 seconds",
image: crossMountainClimbers,
},
{
name: "jump rope",
time: "45 seconds",
image: jumpRope,
},
{
name: "sprint",
time: "20 seconds",
image: running,
},
{
name: "explosive pushups",
time: "30 seconds",
image: explosivePushups,
},
{
name: "jump squats",
time: "30 seconds",
image: jumpSquats,
},
],
},
],
cooldown: [
{
name: "toe touch",
time: "20 seconds",
sets: 2,
image: toeTouch,
},
{
name: "toe touch with leg spread",
time: "20 seconds",
sets: 2,
image: toeTouchWithLegSpread,
},
{
name: "single leg hamstring stretch",
time: "20 seconds",
sets: 2,
image: singleLegHamstringStretch,
},
{
name: "butterfly stretch",
time: "20 seconds",
sets: 1,
image: butterflyStretch,
},
{
name: "knee to chest",
time: "5 seconds",
sets: 4,
image: kneeToChest,
},
{
name: "waist twist",
time: "10 seconds",
sets: 2,
image: waistTwist,
},
{
name: "cobra stretch",
time: "20 seconds",
sets: 1,
image: cobraStretch,
},
],
},以下是相應的樣式
.pressed-2,
.pressed-2:hover {
animation: press-2 0.3s ease-in-out !important;
}
@keyframes press-2 {
0% {
transform: scale(1);
box-shadow: 1px 10px 5px 1px #c471ed;
}
50% {
transform: translateY(5px);
box-shadow: 3px 4px 5px 1px #24fe41;
}
100% {
transform: scale(1) translateX(0) translateY(0);
box-shadow: 1px 10px 5px 1px #c471ed;
}
}
.increase-shadow-on-hover {
box-shadow: 1px 3px 5px 1px #12c2e9 !important;
transition: all 0.3s ease !important;
}
.increase-shadow-on-hover:hover {
box-shadow: 1px 10px 5px 1px #c471ed !important;
transform: translateY(-5px) !important;
transition: all 0.3s ease !important;
}在其他地方，同樣的事情正在正常進行。例如:
const WorkoutCard = ({
image,
name,
btnContent,
btnAction,
isDelete,
deleteAction,
}) => {
const [classNames, setClassNames] = useState("increase-shadow-on-hover");
return (
<Stack
className={classNames}
alignItems="center"
sx={{
width: "260px",
height: "240px",
borderRadius: "30px",
p: "10px",
background: "rgba(10, 18, 38, 1)",
position: "relative",
}}>
<img
src={image}
alt="image"
style={{
width: "100%",
height: "70%",
borderRadius: "30px",
}}
/>
<Stack
alignItems="center"
spacing={1}
sx={{
width: "100%",
background: "rgba(10, 18, 38, 1)",
position: "absolute",
bottom: "7px",
pt: "2px",
borderRadius: "30px",
}}>
<Typography
className="gradient-text-2"
sx={{
width: "100%",
color: "#fff",
textTransform: "capitalize",
textAlign: "center",
fontSize: "18px",
}}>
{name}
</Typography>
<Stack direction="row" alignItems="center" spacing={2}>
<Button
size="medium"
variant="outlined"
className="gradient-text-5"
onClick={() => {
setClassNames("pressed-2");
setTimeout(() => {
setClassNames("increase-shadow-on-hover");
btnAction();
}, 300);
}}>
{btnContent}
</Button>
{isDelete && (
<DeleteIcon
onClick={() => {
setClassNames("pressed-2");
setTimeout(() => {
setClassNames("increase-shadow-on-hover");
deleteAction();
}, 300);
}}
sx={{
color: "#ff3232",
ml: "10px",
cursor: "pointer",
}}
/>
)}
</Stack>
</Stack>
</Stack>
);
};
如果你需要的話，下面是不能正常工作的組件的完整代碼:)
const RoutineSection = ({
chosenRegimeData,
addWorkout,
removeWorkout,
hide,
setHide,
rows,
columns,
handleCellEditStop,
}) => {
const [chosenRoutine, setChosenRoutine] = useState("");
useEffect(() => {
setChosenRoutine("");
}, []);
const showRoutineExercises = (routine) => {
setChosenRoutine(routine);
};
const [classNames, setClassNames] = useState(
"increase-shadow-on-hover routine-card"
);
return (
<Stack
// className="decrease-shadow-on-hover-2"
spacing={5}
alignItems="center"
sx={{
width: "97vw",
background: "rgba(8, 12, 30, 1)",
mt: "120px",
py: "40px",
px: "10px",
borderRadius: "30px",
}}>
<Typography
className="gradient-text-4"
sx={{
fontSize: "80px",
fontWeight: "bold",
mb: "20px",
}}>
Routines
</Typography>
{chosenRoutine === "" ? (
<Stack
sx={{
px: "30px",
py: "20px",
pb: "40px",
borderRadius: "30px",
}}>
<Stack
direction="row"
sx={{
justifyContent: "center",
gap: "80px",
flexWrap: "wrap",
}}>
{chosenRegimeData.routine.map((routine, index) => (
<Box
key={index}
sx={{
borderRadius: "30px",
}}>
<Box
className={classNames}
sx={{
display: "grid",
width: "400px",
height: "370px",
borderRadius: "30px",
p: "10px",
background: "rgba(10, 18, 38, 1)",
position: "relative",
}}>
<img
src={routine.image}
alt="image"
style={{
width: "100%",
height: "70%",
borderRadius: "30px",
}}
/>
<Stack
alignItems="center"
spacing={1}
sx={{
width: "100%",
background: "rgba(10, 18, 38, 1)",
position: "absolute",
bottom: "20px",
pt: "2px",
borderRadius: "30px",
}}>
<Typography
className="gradient-text-2"
sx={{
width: "100%",
color: "#fff",
textTransform: "capitalize",
textAlign: "center",
fontSize: "24px",
}}>
{routine.name}
</Typography>
<Stack direction="row" alignItems="center" spacing={2}>
<Button
size="large"
variant="outlined"
className="gradient-text-5"
onClick={() => {
setClassNames("pressed-2");
console.log("pressed", index);
setTimeout(() => {
setClassNames("increase-shadow-on-hover");
showRoutineExercises(routine);
}, 300);
}}>
See Exercises in this Routine
</Button>
</Stack>
</Stack>
</Box>
</Box>
))}
</Stack>
<Stack
direction="row"
className="datagrid-container"
sx={{
mt: "150px !important",
height: "fit-content",
width: "fit-content",
display: "grid",
placeItems: "center",
mx: "auto !important",
}}>
<DataGrid
onRowClick={(params, event) => {
console.log(params, event);
setHide((prev) => (prev === "hide" ? "" : ", hide"));
}}
// initialState={{
// pagination: {
// paginationModel: { pageSize: 5, page: 0 },
// },
// }}
onCellEditStop={handleCellEditStop}
rows={rows}
columns={columns}
sx={{
color: "#fff",
height: "fit-content",
}}
/>
<DeleteIcon
onClick={() => {}}
className={hide}
sx={{
width: "40px",
height: "40px",
color: "#ff3232",
ml: "10px",
cursor: "pointer",
}}
/>
</Stack>
</Stack>
) : (
<ExercisesOfRoutine
routine={chosenRoutine}
addFunction={addWorkout}
removeFunction={removeWorkout}
setChosenRoutine={setChosenRoutine}
handleCellEditStop={handleCellEditStop}
rows={rows}
columns={columns}
hide={hide}
setHide={setHide}
/>
)}
</Stack>
);
};如果你想在卡片被點擊后改變某個類，你可以試試下面兩個方法之一:
1-為您的類設置一個模仿onclick事件的偽選擇器: CSS中可以有onclick效果嗎？
2-為每張卡的onclick事件創建一個函數，
onClick={(e)=>addAnimationClass(e)}
const addAnimationClass = event => event.target.classList.add('your-animation-className');這僅用于添加，但如果您想要單擊另一個框并恢復之前單擊的框的類，您可以獲得如下示例所示的方法:
function BoxList() {
const [selectedBox, setSelectedBox] = useState(null);
const handleBoxClick = (boxId) => {
setSelectedBox(boxId);
};
const boxData = [
{ id: 1, color: 'red' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'green' },
];
return (
<div>
{boxData.map((box) => (
<div
key={box.id}
className={`box ${selectedBox === box.id ? 'your-animation-className' : ''}`}
style={{ backgroundColor: box.color }}
onClick={() => handleBoxClick(box.id)}
></div>
))}
</div>
);
}上一篇deps.json
下一篇c 生成兩層json數據