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

CSS Transition Work When Class is removed and doesn't work when class is added

In my React Project i’m trying to show hidden elements using css transition
I have a button when i click on it a class expand is added and when i reclick on it the class is removed

This is my code

export const ProjectsSection = () => {
     const [extend, setExtend] = useState(false);
  const handleClick = () => {
    setExtend(!extend); // Toggle the expand state between true and false
  };

  return (
    <section className="projects bg-dark">
      <div className="container">
        <div className="heading text-center ">
          <span className="text-capitalize ">latest work</span>
          <h2 className="text-white">
            Explore My Popular <span>Projects</span>
          </h2>
        </div>
        <div className={`row mt-5 ${extend ? "extend" : ""}`}>
          {ProjectsData.map((project, i) => (
            <Project
              key={i}
              projectName={project.projectName}
              projectImg={project.projectImg}
              projectLink={project.projectLink}
            />
          ))}
        </div>
        <div className="mt-5 text-center ">
          <button
            className="theme-btn show-more border-0 "
            onClick={handleClick}
          >
            Show More
            <FontAwesomeIcon icon={faChevronRight} className="arrow" />
          </button>
        </div>
      </div>
    </section>
  );
};

And this is the CSS

.projects .row {
  max-height: 40.625rem;
  overflow: hidden;
  transition: max-height 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.projects .row.extend {
  max-height: 85rem;
  overflow: visible;
}

The Problem is that the transition appear only when the class extend is removed and there is no transition when the class extend is added
Im using the max-height for the transition

I tried to use transition-delay also this didn’t help

Also i tried to use

.projects .row {
height: 40.625rem;
  max-height: 40.625rem;
  overflow: hidden;
  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.projects .row.extend {
height: 85rem;
  max-height: 85rem;
  overflow: visible;
}

Also this didn’t help

How can i solve this problem and the transition appear when the class extend is added and when the class extend is removed

Tags:

2

Answers


  1. 0

    As soon as you remove your class, the element has its visibility property set to hidden. Its transition will still apply, but it’s hidden so you’re not going to see it.

    The visibility property is animatable, but because it’s discrete it will just swap values halfway through. The way I like to take advantage of this in my code is by setting up a CSS animation that will keep an element visible for a duration. For example:

    @keyframes stayVisible {
    from { visibility: visible; }
      to { visibility: visible; }
}

.element {
    overflow: hidden;
    animation: 0.3s stayVisible;
}

    This lets you tell an element to swap from visibility: visible; to visibility: hidden; after a set duration, for example after long enough for your transition to complete.

    Trying to use this for an element that needs to be hidden initially would likely give you some trouble since the animation will run when it is first rendered, so you might want to use a separate class for keeping it visible and apply that at the same time as you remove your .extend class.

    Login or Signup to reply.
  2. 0

    You can transition between fixed and auto heights by using CSS Grid. This demo sets the ‘collapsed’ .row to have grid-template-rows: 0fr;. We give the .inner content a min-height and overlow:hidden. We can then animate between 0fr and 1fr to achieve the affect you are looking for.

    .projects {
  max-width: 300px;
}

.projects .row {
  border: 1px solid grey;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s;
}

.projects .row.extend {
  grid-template-rows: 1fr;
}

.projects .row .inner {
  overflow: hidden;
  min-height: 4rem;
}
    <div class="projects">
  <div class="row" onclick="this.classList.toggle('extend')">
    <div class="inner">Click me to toggle class.<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet dui velit. Pellentesque id nibh ac lectus faucibus accumsan. Nunc quis ligula vel magna imperdiet semper ut non ante. Nullam ut metus pellentesque,
      fringilla dui quis, facilisis tellus. Donec ut enim ac ex tempor aliquam. Praesent quis dui nisl. Integer et semper risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</div>
  </div>
  <div class="row" onclick="this.classList.toggle('extend')">
    <div class="inner">Click me to toggle class.<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet dui velit. Pellentesque id nibh ac lectus faucibus accumsan. Nunc quis ligula vel magna imperdiet semper ut non ante. Nullam ut metus pellentesque,
      fringilla dui quis, facilisis tellus. Donec ut enim ac ex tempor aliquam. Praesent quis dui nisl. Integer et semper risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search