How can I make a CSS transition activate only on width increases, not decreases?

Question

How can I make a CSS transition activate only on width increases, not decreases?

My element's width changes under different conditions, and I've implemented CSS with a transition for the width:

.element-class {
    transition: width 500ms ease 0ms;
}

However, I only want the transition to occur when the width is decreasing. If it increases, I want it to change immediately without a transition. Is there a way to specify that the transition property should only work in one specific scenario like this? Or is there an alternative approach?

I attempted to add two transition properties, but they do not apply simultaneously (which was expected, but I gave it a try).

css css-transitions

Answer 1

Answer №1

One way to implement a smooth transition effect is by applying the transition property to a class or pseudo element like :hover, rather than directly on the element itself.

document.getElementById('toggle').addEventListener('click', () => {
  document.getElementById('square').classList.toggle('w-100');
})

#square {
  margin-top: 20px;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

#square:hover {
  background-color: orange;
  transition: background-color 500ms;
}

#square.w-100 {
  width: 100px;
  transition: width 500ms;
}

<button id="toggle">Toggle</button>
<div id="square"></div>

Answer 2

One way to implement a smooth transition effect is by applying the transition property to a class or pseudo element like :hover, rather than directly on the element itself.

document.getElementById('toggle').addEventListener('click', () => {
  document.getElementById('square').classList.toggle('w-100');
})

#square {
  margin-top: 20px;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

#square:hover {
  background-color: orange;
  transition: background-color 500ms;
}

#square.w-100 {
  width: 100px;
  transition: width 500ms;
}

<button id="toggle">Toggle</button>
<div id="square"></div>

How can I make a CSS transition activate only on width increases, not decreases?

Answer №1

Similar questions

Expanding Lists in Bootstrap 3: A Step-by-Step Guide

What are the solutions for addressing popping behavior during hover effects?

Explore all dropdowns in Bootstrap by hovering over them

How to add an 'alt' text tag to a background image sprite

Clarification: Javascript to Toggle Visibility of Divs

"Encountered an issue while attempting to scrape data from Rotten Tomatoes website

When the browser is resized to smaller than the minimum width specified, the div element fails to center

Creating a Dynamic Canvas Rendered to Fit Image Dimensions

When the screen size decreases, display the title on two lines

Achieving a smooth transition from a blur-out effect to a blur-in effect on a background Div

Enhancing elements with fade-in effects upon hovering

How can I make Material UI's grid spacing function properly in React?

Enable divs to be interactively chosen

Responsive design not functioning properly for Bootstrap columns on website

Styling in sass gets even more powerful when using custom selectors that are

Using ASP .NET controls in conjunction with Bootstrap

SVG is not extending to the entire viewport in mobile view

Troubleshooting CSS Navigation Drop Issue Specific to Google Chrome. Seeking Feedback on Rails Tutorial Experience

Using Bootstrap 4: How to maximize the width of a span element placed near a label

Show the saved email message text on an HTML webpage