What causes the sudden jump in width during a transition?

Question

What causes the sudden jump in width during a transition?

I'm having trouble with setting transitions. Everything seems to be in order and almost working, but I'm experiencing a "jumping" effect: instead of smoothly transitioning the width from 100% to 100px, it jumps from 100% to "min-content" to 100px.

Here is my JSFiddle for reference: https://jsfiddle.net/oth8k35q/27/

The main parts of my code are as follows:

<div style="display:inline-flex; width: 400px; border: 1px dotted black;">
  <div id="c1" class="active">
    <div> 1 </div> <div id="d1"> 1 </div>
  </div>
  <div id ="c2">
    <div> 1 </div> <div id="d2"> 1 </div>
  </div>
</div>

#d1, #d2 {
  width: 100px;
}

.active, .active #d1, .active #d2 {
  width: 100%;
}

#d1, #d2 {
  transition: width 1s;
}

css css-transitions

Answer 1

Answer №1

It appears that the sudden movement you are experiencing is due to the behavior of the flex-grow property in your flex-box setup. One solution could be to animate the flex-grow and flex-shrink properties to create a smoother transition. Please note that this solution has been tested in Chrome only.

To adjust the pseudo min-width, you can modify the width of the container class, for example:

.container{
  display: inline-flex;
  width: 125px;
  flex-shrink: 100;
  flex-grow: 1;
  transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1), flex-shrink 1s cubic-bezier(0.4, 0, 0.2, 1);
}

function toggleClasses(){
    document.getElementById('container-1').classList.toggle('active');
    document.getElementById('container-2').classList.toggle('active');
}

document.getElementById('container-1').addEventListener('click', () => {
    if(document.getElementById('container-1').classList.contains('active')) return;
    toggleClasses();
});

document.getElementById('container-2').addEventListener('click', () => {
  if(document.getElementById('container-2').classList.contains('active')) return;
    toggleClasses();
});

.wrapper{
  display:inline-flex; 
  width: 400px; 
  border: 1px dotted black;
  box-sizing: border-box;
  overflow: auto;
}

.wrapper .container:nth-child(1){
  background: lightblue;
}
.wrapper .container:nth-child(2){
  background: blue;
}

.wrapper .container:nth-child(1) div:last-child{
  background: rgba(255,0,0,0.33);
  cursor: pointer;
}
.wrapper .container:nth-child(2) div:last-child{
  background: rgba(0,255,0,0.33);
   cursor: pointer;
}

.container{
  display: inline-flex;
  width: 100%;
  flex-shrink: 100;
  flex-grow: 1;
  transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1), flex-shrink 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.container.active{
  flex-grow: 100;
  flex-shrink: 1;
}

.element{
  width: 100%;
}

<div class="wrapper">
    <div id="container-1" class="container active">
        <div>1</div>
        <div class="element">Content#1</div>
    </div>
    <div id="container-2" class="container">
        <div>1</div>
        <div class="element">Content#2</div>
    </div>
</div>

Answer 2

It appears that the sudden movement you are experiencing is due to the behavior of the flex-grow property in your flex-box setup. One solution could be to animate the flex-grow and flex-shrink properties to create a smoother transition. Please note that this solution has been tested in Chrome only.

To adjust the pseudo min-width, you can modify the width of the container class, for example:

.container{
  display: inline-flex;
  width: 125px;
  flex-shrink: 100;
  flex-grow: 1;
  transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1), flex-shrink 1s cubic-bezier(0.4, 0, 0.2, 1);
}

function toggleClasses(){
    document.getElementById('container-1').classList.toggle('active');
    document.getElementById('container-2').classList.toggle('active');
}

document.getElementById('container-1').addEventListener('click', () => {
    if(document.getElementById('container-1').classList.contains('active')) return;
    toggleClasses();
});

document.getElementById('container-2').addEventListener('click', () => {
  if(document.getElementById('container-2').classList.contains('active')) return;
    toggleClasses();
});

.wrapper{
  display:inline-flex; 
  width: 400px; 
  border: 1px dotted black;
  box-sizing: border-box;
  overflow: auto;
}

.wrapper .container:nth-child(1){
  background: lightblue;
}
.wrapper .container:nth-child(2){
  background: blue;
}

.wrapper .container:nth-child(1) div:last-child{
  background: rgba(255,0,0,0.33);
  cursor: pointer;
}
.wrapper .container:nth-child(2) div:last-child{
  background: rgba(0,255,0,0.33);
   cursor: pointer;
}

.container{
  display: inline-flex;
  width: 100%;
  flex-shrink: 100;
  flex-grow: 1;
  transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1), flex-shrink 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.container.active{
  flex-grow: 100;
  flex-shrink: 1;
}

.element{
  width: 100%;
}

<div class="wrapper">
    <div id="container-1" class="container active">
        <div>1</div>
        <div class="element">Content#1</div>
    </div>
    <div id="container-2" class="container">
        <div>1</div>
        <div class="element">Content#2</div>
    </div>
</div>

Answer 3

Answer №2

I recently incorporated the transition: width 1s; property within the styling of #c1.active #d1, #c2.active #d2.

var change = function(selector){
  $(".active").removeClass('active');
   $(selector).addClass('active');
}
$('#d1').click(function(){
  change('#c1');
});

$('#d2').click(function(){
  change('#c2')
});

#d1 {
  background-color: green;
  width: 100px;
}
#d2 {
  background-color: red;
  width: 100px;
}
.active{
  width: 100%;
}
#c1, #c2 {
  display: inline-flex;
}
#c1.active #d1, #c2.active #d2 {
  width: 100%;
  transition: width 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; width: 400px; border: 1px dotted black;">
  <div id="c1" class="active">
    <div>1</div>
    <div id="d1">d1</div>
  </div>
  <div id="c2">
    <div>1</div>
    <div id="d2">d2</div>
  </div>
</div>

Answer 4

I recently incorporated the transition: width 1s; property within the styling of #c1.active #d1, #c2.active #d2.

var change = function(selector){
  $(".active").removeClass('active');
   $(selector).addClass('active');
}
$('#d1').click(function(){
  change('#c1');
});

$('#d2').click(function(){
  change('#c2')
});

#d1 {
  background-color: green;
  width: 100px;
}
#d2 {
  background-color: red;
  width: 100px;
}
.active{
  width: 100%;
}
#c1, #c2 {
  display: inline-flex;
}
#c1.active #d1, #c2.active #d2 {
  width: 100%;
  transition: width 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="display: flex; width: 400px; border: 1px dotted black;">
  <div id="c1" class="active">
    <div>1</div>
    <div id="d1">d1</div>
  </div>
  <div id="c2">
    <div>1</div>
    <div id="d2">d2</div>
  </div>
</div>

Answer 5

Answer №3

Hello there! Give this a shot, using a 100% width may lead to some problems with the transition effect.

    .active, .active #d1, .active #d2 {
      width: calc(400px - 100px);
    }

Answer 6

Hello there! Give this a shot, using a 100% width may lead to some problems with the transition effect.

    .active, .active #d1, .active #d2 {
      width: calc(400px - 100px);
    }

What causes the sudden jump in width during a transition?

Answer №1

Answer №2

Answer №3

Similar questions

What is preventing the question div and buttons from expanding according to their content?

CSS error with contrasting colors, the reason behind it is unknown

What could be causing my fixed header to disappear in Safari 5?

What is the method for displaying text and icons as black in a sticky header design?

The cube mesh is failing to render inside the designated div

What is the best way to insert a scroll into a section of a circular shape seamlessly?

Applying CSS Filters can sometimes interfere with the functionality of 3D

Is it best to stick with a static page size, or

Utilizing the CSS Flex property to position one element in the center and align the other element to either the left or right side

Should we consider using extra url query parameters as a legitimate method to avoid caching or enforce the updating of css/js files?

Using CSS to Create a Gradient Background with an Image

tips for concealing the sorting icon in the DataTables header upon initial load

Styling with react-jss based on intricate conditionals

JavaScript function that adjusts the top position when toggling

Lines running horizontally on either side of the text

The height of each list item should expand based on the size of the div contained within it

Tips for modifying multiple divs with the same class using querySelector

Troubleshooting problems with the width of a UI Bootstrap accordion container

Paged Content: Turning a Lengthy Text into a Book-Like Format

Like button for Facebook located at the bottom of a static webpage