Transition 在 React (CRA) 应用程序中不起作用

Question

我需要文本底部变灰，长文本在特定高度截断。有一个按钮，单击该按钮会展开此部分。除了我想添加的动画外，一切正常。我做错了什么？

我的代码如下：

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;
      }
    }
  }
}

你可以在这里看到例子：https://codesandbox.io/s/silly-banach-iofv38?file=/src/Animal.scss:0-900

感谢您的帮助。

Answer 1

这是一个如何实现的例子：

const button = document.getElementById("button")
const textfield = document.getElementById("textfield")
button.addEventListener('click', (e) => {
  e.preventDefault()
  textfield.classList.add("show-text")
}, false)

p {
  position: relative;
}

p:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: linear-gradient(to top, white, transparent);
  transition: height 1s ease-in;
}

.show-text:after {
  height: 0;
  transition: height 1s ease-in;
}

<button id="button">Show Text</button>

<p id="textfield">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
tortor dolor, hendrerit non nunc eget, iaculis accumsan magna.
Pellentesque iaculis ac odio ac egestas. Aliquam non ante nec
lorem egestas interdum. Fusce et semper dui, eget lacinia sem.
Cras vel tempus nibh. Cras non ex pretium felis venenatis
sollicitudin nec id ex. Vestibulum aliquam lacus rutrum massa
tempor dapibus. Donec dictum metus tempus, pulvinar sem nec,
hendrerit tellus. Quisque quis massa id odio placerat consequat
dignissim quis magna. In hac habitasse platea dictumst.
</p>