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

Using ASCII 3D text can create a stunning visual effect on a website, but it can sometimes appear

What is the best way to apply typography theme defaults to standard tags using Material-UI?

Is there a way to dynamically update the content of <li> tag with values from an array every x seconds

Is there a way to ensure that spans are inline with a div?

Modifying the Background Color of a Header in React Native

What could be causing my website to extend beyond 100% width?

Design a customizable input field to collect HTML/JS tags

Move the button above a hyperlink in a Bootstrap carousel

Personalizing the arrow positioning of the Angular8 date picker (both top and bottom arrow)

Is there a way to adjust the orientation of a <video> element without affecting the orientation of the video controls?

Reacting to the dynamic removal of spaces

Creating a dynamic dashed line animation using SVG

What is the process for marking a form field as invalid?

Is there a way to modify the background shade of an HTML meter element?

How can I speed up the loading time of my background image?

Compiling SCSS to CSS in Vue.js is a breeze

Navigating React Router: Updating the page on back button press

Error loading CSS file on Google App Engine

Scroll horizontally through the number field in Chrome

Exploring the Contrasts: AppBar vs Toolbar in MUI v5