卡片动画和过渡

Question

import Section from '@/components/section'
import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image, Button} from "@nextui-org/react";
import { CSSProperties, useState } from 'react';
 
const Index = () => {
  const ExpandedCard = ({ card }: { card: { name: string; price: string } }) => {
    return (
      <div
        style={{
          width: '100%',
          height: '30vh',
          backgroundColor: 'white',
          padding: '20px',
          borderRadius: '10px',
          boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
          transition: 'opacity 0.5s ease-in-out', // Add transition effect
        }}
      >
        <h2>{card.name}</h2>
        <p>{card.price} RSD</p>
        <button onClick={() => setExpandedCard(null)}>Close</button>
      </div>
    );
  };
 
  const [expandedCard, setExpandedCard] = useState<number | null>(null);
 
  const handleCardClick = (index: number) => {
    setExpandedCard(index);
  };
 
  const cards = [
    { name: 'Tost', price: '140' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
    { name: 'Sendvic', price: '150' },
  ];
 
  return (
    <Page>
      <Section>
        {expandedCard !== null ? (
          <ExpandedCard card={cards[expandedCard]} />
        ) : (
          <div className="grid grid-cols-2 gap-2 justify-center">
            {cards.map((card: { name: string; price: string }, index: number) => (
              <Card
                key={index}
                isPressable
                onClick={() => handleCardClick(index)}
                style={{
                  transition: 'opacity 0.5s ease-in-out', // Add transition effect
                }}
              >
                <CardBody>
                  <img src="https://via.placeholder.com/200x150" alt="Placeholder Image" />
                  <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                  }}>
                    <h5>{card.name}</h5>
                    <p>{card.price} RSD</p>
                  </div>
                </CardBody>
              </Card>
            ))}
          </div>
        )}
      </Section>
    </Page>
  );
};
 
export default Index
 

我的 NextJS 项目上的动画由于某种原因无法正常工作，我是新手，所以我真的不知道发生了什么。

如果有帮助的话，我正在使用 NextUI 作为 UI 元素

卡片只是出现然后消失。

卡片动画在那里，但它们没有做任何事情，我认为这是因为展开的卡片和点击的卡片不是同一件事，所以CSS不能为单独的元素设置动画？

Answer 1

我不是react专家，但从css的角度来看，这是行不通的。你的浏览器无法在你的两张卡之间转换，因为他不知道如何： 这里您正在显示一张卡片，如果应该展开它，您将显示另一张展开的卡片。然而，为了使转换起作用，必须将转换应用于 SAME 元素的从状态 A 到状态 B 的情况。因此我只能建议你回顾一下你正在尝试做的事情。图像应该如何出现？从左边开始？来自不透明度？

首先，您应该首先创建两个代表卡片状态 A 和 B 的 CSS 类，然后您可以转换所需的属性。请注意，您无法转换计算属性。在这种情况下，如果您没有明确指定两种状态的高度值，您将无法转换卡片的高度。

希望这对您有帮助，如果您需要更多帮助，请留言