Question 58213 in CSS Question posted in
Some basic documentation can be found here.

Transition doesn’t work in React (CRA) app – CSS

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.

Tags:

2

Answers


  1. 0

    Here is an example how this could be achieved:

    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>
    Login or Signup to reply.
  2. 0

    Move overflow: hidden to the .article class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search