Bootstrap 4 Animate Column Width Change

bootstrap 4 animate column width change

Since Bootstrap 4 uses flexbox, CSS transition animations don't work unless you use set a numeric flex-grow or flex-shrink on the columns.

.col-8 {
  flex-grow: 1;
  transition: all 400ms ease;
}

.col-0 {
  width: 0; 
  flex-shrink: 1;
  transition: all 400ms ease;
}

Demo: http://www.codeply.com/go/4Un0Q8CvkQ

To animate the grid columns as they change the media query breakpoints (instead of toggle classes via jQuery), you can simply use a CSS transition on the grid columns.

.row [class*='col-'] {
    transition: all 0.5s ease-in-out;
}

Demo: https://www.codeply.com/go/IHUZcvNjPS

How to animate col resize in bootstrap 4?

I think the transition css property should do the thing, but I am not sure. Try to set:
div[class*="col-"] { transition: .3s ease; } and let me know.

Animate bootstrap columns

This could be done with CSS3 transitions, which would be consistent with the way Bootstrap JS plugins accomplish their animations.

HTML

<div class="container">
  <div class="row">
    <div id="col2" class="span0"></div>
    <div id="col1" class="span12">
      <a id="trig" class="btn btn-inverse">Reflow Me</a>
    </div>
  </div>
</div>

JS

$('#trig').on('click', function () {
  $('#col1').toggleClass('span12 span3');
  $('#col2').toggleClass('span0 span9');
});

CSS

.row div {
    -webkit-transition: width 0.3s ease, margin 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease;
}

.span0 {
    width: 0;
    margin-left: 0;
}

JSFiddle

JSFiddle (Fluid)

_{Note: The animation is a still a bit imprecise, but I figure that can all be worked out separately. This answer provides the basic outline of how to go about it.}

Ionic 5 Animate change width of columns

hey Nebojša Smrzlić you should try this.

In your .ts file declare these variables:

colum1=8
colum2=4
show_colum2:true

constructor(){}

show_expand(){
 this.show_colum2=!this.show_colum2
 if(!show_colum2){this.colum2=12}else{this.colum2=4}
 }

And your html would be like this:

 <ion-grid>
 <ion-row>
   <ion-col [size]=colum1 *ngif=show_colum2>  
     </ion-col>
   <ion-col [size]=colum2>
      <ion-button (iclick)='show_expand()'> expand/show</ion-button>
    </ion-col>
   </ion-row>
</ion-grid>

I set a button in the column that you want to expand and collapse just to try the click event and call the function in yous ts to try de method.

if you what a good looking animation to show expand I recommend this post
CSS Expand / Contract Animation to Show/Hide Content

So let me know if this works

How to make Bootstrap responsive divs transition when their width property disappears

Have a look at this sample code, when you resize the window you will see the transition as expected. Is this what you were trying to get?

When you use all col-xx-xx you will always get the percentage width you want... like this class="col-xs-3 col-sm-3 col-md-3".

In this demo the bottom row divs always has a width of 25%.

Reality here is that a general user opens a website on a device and that screen is what it is, the user would not see this transition effect.

I set a media breakpoint at 892px to test at.

Sample Image

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">        <meta name="description" content="">    <meta name="author" content="">    <link rel="icon" href="../../favicon.ico">
    <title>Starter Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>body {  padding-top: 50px;}  .bg-orange {  background-color: orangered;} .bg-green {  background-color: greenyellow;}.bg-violet {  background-color: blueviolet;}     .transition-width {     transition: width 10s ease-out;     webkit-transition: width 10s ease-out; }         @media(min-width:892px)  {   div{width:100%;} }@media(max-width:892px)  {  div{width:100%;} }        </style>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top ">      <div class="container">        <div class="navbar-header">          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">            <span class="sr-only">Toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>          <a class="navbar-brand " href="#">Project name</a>        </div>        <div id="navbar" class="collapse navbar-collapse">          <ul class="nav navbar-nav navbar-right">            <li class="active"><a href="#">Home</a></li>            <li><a href="#about">About</a></li>            <li><a href="#contact">Contact</a></li>          </ul>        </div><!--/.nav-collapse -->      </div>    </nav>
<div class="container col-lg-12"><br><br></div><div class="container col-lg-12">    <h3>Transition when resized.</h3>
  <div class="row">       <div class="col-md-3 bg-primary">           ...       </div>       <div class="col-md-3 bg-orange">           ...       </div>       <div class="col-md-3 bg-violet">           ...       </div>       <div class="col-md-3 bg-green">           ...       </div> </div>     <div class="container col-lg-12"><br><br></div>     <div class="row">       <div class="col-md-3 bg-primary transition-width">           ...       </div>       <div class="col-md-3 bg-orange transition-width">           ...       </div>       <div class="col-md-3 bg-violet transition-width">           ...       </div>       <div class="col-md-3 bg-green transition-width">           ...       </div> </div>    <div class="container col-lg-12"><br><br></div>    <div class="row">       <div class="col-xs-3 col-sm-3 col-md-3 bg-primary">           ...       </div>       <div class="col-xs-3 col-sm-3 col-md-3 bg-orange">           ...       </div>       <div class="col-xs-3 col-sm-3 col-md-3 bg-primary">           ...       </div>       <div class="col-xs-3 col-sm-3 col-md-3 bg-orange">           ...       </div> </div>    </div><!-- /.container -->

    <!-- Bootstrap core JavaScript    ================================================== -->    <!-- Placed at the end of the document so the pages load faster -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    </body></html>

Bootstrap 4 Animate Column Width Change