Transition doesn't work in React (CRA) app

April 25, 2023

I need the bottom of the text to be grayed out, and long text to be cut off at a specific height. There’s a button that, when clicked, should expand this section. Everything works fine except for the animation that I would like to add. What am I doing wrong?

My code is below:

JSX:

import { useState } from "react";
import "./Animal.scss";

export const Animal = ({ className }) => {
  const [showFullArticle, setShowFullArticle] = useState(false);

  return (
    <div className={`${className ? className : ""}`}>
      <button
        onClick={() => {
          setShowFullArticle(true);
        }}
      >
        READ MORE
      </button>
      <div className="animal-container">
        <div className={`article ${!showFullArticle ? "faded-out" : ""}`}>
          <div className="title">Lorem Ipsum</div>
          <div className="description">
            <pre>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
              tortor dolor, hendrerit non nunc eget, iaculis accumsan magna.
              a lot more text here...
            </pre>
          </div>
        </div>
      </div>
    </div>
  );
};

SASS:

.animal-container{
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  height: 100%;

  .article{
    padding: 20px 20px 20px 0;
    position: relative;

    max-height: 2000px;
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;

    &.faded-out{
      overflow: hidden;
      max-height: 200px;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 400px; /* Adjust the height of the fade-out effect */
        background-image: linear-gradient(to top, white, transparent);
      }
    }



    .title{
      font-size: 30px;
      font-weight: bold;
    }

    .description{
      padding-top: 20px;

      font-size: 20px;
      pre {
        white-space: break-spaces;
        margin: initial;
      }
    }
  }
}

You can see example here: https://codesandbox.io/s/silly-banach-iofv38?file=/src/Animal.scss:0-900

Thank you for any help.