Unwanted behavior with CSS transition

Question

I have an Angular application. Its HTML file contains a div with class row which itself contains two divs with class col. By clicking on the button, the size of the columns change:


      
        
          .col-sm-8     
        
        
          .col-sm-4

To have a smooth resize, I have added transition property to the col classes in the CSS file:

.col-sm-8 { transition: width .5s ease; }

.col-sm-4 { transition: width .5s ease ; }

The TS file (that contains the changeColumnsSize function) looks like this:

export class BoxComponent {
  leftColumnSize: number = 12;
  rightColumnSize: number = 0;
  colDifference: number = 4;
  state: boolean = false;

  constructor() { }

  changeColumnsSize(){
    if (this.state===false)
      this.state = true;
    else
      this.state = false;
    if(this.state===true) {
      this.leftColumnSize-=this.colDifference;
      this.rightColumnSize+=this.colDifference;
    }
    else if (this.state===false) {
      this.leftColumnSize+=this.colDifference;
      this.rightColumnSize-=this.colDifference;
     }
    }
  }

However, there is a problem. Every time the transition occurs, the rightColumn appears below the leftColumn, then moves up to the correct place.

Can you help me solving this? I prefer to solve this without using Angular animations.

user_1891677 · Answer

That's because in v4 the grid layout is not based on width property (and box model) but on
flex-basis + max-width (and flexbox model).

You need to set the transition on both properties. Or, the lazy and wrong way: on all.

See it working:

function changeColSize() {
  $('.col-switcher > div').toggleClass('col-sm-4 col-sm-8')
}

.col-switcher>div {
  transition: max-width .3s cubic-bezier(.4, 0, .2, .1), 
              flex-basis .3s cubic-bezier(.4, 0, .2, .1);
}







  
  
    
      .col-sm-8
    
    
      .col-sm-4

Unwanted behavior with CSS transition

1 Answers