javascript - I cant get my gsap animation to work on the way backup - Stack Overflow

admin管理员组

文章数量:1122846

I've been working on a website and have been trying to get my animation to work. Oddly enough it works when you click on it and it expands but it doesnt work when you click on it again which should shrink it. It does work when you shrink it if another foodCard is expanded and you're shrinking a different foodCard. Does anyone know why this might be happening?

import React, { useEffect, useRef, useState } from 'react';
import Star from '../Star/Star';
import MacroTable from "../Macros/MacroTable";
import { FaLeaf, FaBreadSlice, FaHandRock } from 'react-icons/fa';
import gsap from "gsap";
import {useGSAP} from "@gsap/react";

function FoodCard({ foodItem, updateRating }) {
  const [isExpanded, setIsExpanded] = useState(false);
  const cardRef = useRef(null);

  useEffect(() => {
    let tl = gsap.timeline();
    if (isExpanded) {
      gsap.to(cardRef.current, {
        height: 'auto',
        duration: 0.5,
        ease: 'linear'
      });
    } else {
      gsap.to(cardRef.current, {
        height: '8rem',
        duration: 0.5,
        ease: 'linear'
      });
    }
  }, [isExpanded]);

  const averageRating = (foodItem.rating / (foodItem.rating_count || 1)).toFixed(1);

  const handleRating = (newRating) => {
    updateRating(foodItem.title, newRating);
  };

  let labelsArray = [];
  try {
    if (Array.isArray(foodItem.labels)) {
      labelsArray = foodItem.labels;
    } else if (typeof foodItem.labels === "string" && foodItem.labels.trim()) {
      labelsArray = JSON.parse(foodItem.labels);
    }
  } catch (error) {
    console.error(`Error parsing labels for ${foodItem.title}:`, error);
    labelsArray = [];
  }

  const isVegetarian = labelsArray.includes("vegetarian");
  const hasGluten = labelsArray.includes("gluten");
  const highProtein = labelsArray.includes("protein");

  return (
    <div
      ref={cardRef}
      className={`relative bg-gray-700 text-white rounded-lg shadow-md p-6 cursor-pointer
       hover:bg-gray-600 transition-all duration-300 ${
        isExpanded ? "w-auto h-auto" : "w-64 h-64"
      }`}
      onClick={() => setIsExpanded(!isExpanded)}
    >
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-bold">{foodItem.title}</h2>
        <div className="absolute top-2 right-2 flex justify-end items-start space-x-2">
          {isVegetarian && <FaLeaf title="Vegetarian" className="text-green-400" />}
          {hasGluten && <FaBreadSlice title="Contains Gluten" className="text-yellow-500" />}
          {highProtein && <FaHandRock title="High Protein" className="text-red-400" />}
        </div>
      </div>

      <div className="flex items-center mt-2">
        <Star currentRating={averageRating} onRate={handleRating} />
        <span className="ml-2 text-sm">({foodItem.rating_count} reviews)</span>
      </div>

      {isExpanded && (
        <div className="mt-4">
          <p className="text-gray-300">{foodItem.description}</p>
          <MacroTable macros={foodItem.nutritional_info} />
          <div className="mt-2">
            <h3 className="font-semibold">Portion Size:</h3>
            <p className="text-gray-300">{foodItem.portion_size}</p>
          </div>
        </div>
      )}
    </div>
  );
}

export default FoodCard;

<script src=".3.1/umd/react.production.min.js"></script>
<script src=".3.1/umd/react-dom.production.min.js"></script>

I've been working on a website and have been trying to get my animation to work. Oddly enough it works when you click on it and it expands but it doesnt work when you click on it again which should shrink it. It does work when you shrink it if another foodCard is expanded and you're shrinking a different foodCard. Does anyone know why this might be happening?

import React, { useEffect, useRef, useState } from 'react';
import Star from '../Star/Star';
import MacroTable from "../Macros/MacroTable";
import { FaLeaf, FaBreadSlice, FaHandRock } from 'react-icons/fa';
import gsap from "gsap";
import {useGSAP} from "@gsap/react";

function FoodCard({ foodItem, updateRating }) {
  const [isExpanded, setIsExpanded] = useState(false);
  const cardRef = useRef(null);

  useEffect(() => {
    let tl = gsap.timeline();
    if (isExpanded) {
      gsap.to(cardRef.current, {
        height: 'auto',
        duration: 0.5,
        ease: 'linear'
      });
    } else {
      gsap.to(cardRef.current, {
        height: '8rem',
        duration: 0.5,
        ease: 'linear'
      });
    }
  }, [isExpanded]);

  const averageRating = (foodItem.rating / (foodItem.rating_count || 1)).toFixed(1);

  const handleRating = (newRating) => {
    updateRating(foodItem.title, newRating);
  };

  let labelsArray = [];
  try {
    if (Array.isArray(foodItem.labels)) {
      labelsArray = foodItem.labels;
    } else if (typeof foodItem.labels === "string" && foodItem.labels.trim()) {
      labelsArray = JSON.parse(foodItem.labels);
    }
  } catch (error) {
    console.error(`Error parsing labels for ${foodItem.title}:`, error);
    labelsArray = [];
  }

  const isVegetarian = labelsArray.includes("vegetarian");
  const hasGluten = labelsArray.includes("gluten");
  const highProtein = labelsArray.includes("protein");

  return (
    <div
      ref={cardRef}
      className={`relative bg-gray-700 text-white rounded-lg shadow-md p-6 cursor-pointer
       hover:bg-gray-600 transition-all duration-300 ${
        isExpanded ? "w-auto h-auto" : "w-64 h-64"
      }`}
      onClick={() => setIsExpanded(!isExpanded)}
    >
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-bold">{foodItem.title}</h2>
        <div className="absolute top-2 right-2 flex justify-end items-start space-x-2">
          {isVegetarian && <FaLeaf title="Vegetarian" className="text-green-400" />}
          {hasGluten && <FaBreadSlice title="Contains Gluten" className="text-yellow-500" />}
          {highProtein && <FaHandRock title="High Protein" className="text-red-400" />}
        </div>
      </div>

      <div className="flex items-center mt-2">
        <Star currentRating={averageRating} onRate={handleRating} />
        <span className="ml-2 text-sm">({foodItem.rating_count} reviews)</span>
      </div>

      {isExpanded && (
        <div className="mt-4">
          <p className="text-gray-300">{foodItem.description}</p>
          <MacroTable macros={foodItem.nutritional_info} />
          <div className="mt-2">
            <h3 className="font-semibold">Portion Size:</h3>
            <p className="text-gray-300">{foodItem.portion_size}</p>
          </div>
        </div>
      )}
    </div>
  );
}

export default FoodCard;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>

• javascript
• reactjs
• debugging
• gsap

Share Improve this question Follow edited Nov 22, 2024 at 9:20 VLAZ 28.8k99 gold badges6262 silver badges8282 bronze badges asked Nov 21, 2024 at 20:49 KzichKzich 1333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Transitions in CSS don’t make height: auto work.

CSS Grid comes to the rescue!

https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de

本文标签： javascriptI cant get my gsap animation to work on the way backupStack Overflow