Bootstrap two column animation flikers fix

Question

I have Bootstrap grid of two columns. Full jsfiddle code here.

The problem with the animation applied using this code:

CSS:

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

When showing/toggling the left column, the right column flickers and pops from bottom to top besides the left columns while stretching.

If I just disable this CSS there is no animation and the process is not noticed as they switch fast.

How to add animation without showing the columns flickers.

Full code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Examples for bootstrap-slider plugin">
    <meta name="author" content="">

      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  </head>

  <body>

<style>

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

#col1 {
    background-color: #A6BFBA;
}

#col2 {
    background-color: #DE4124;
}

#trig {
    margin: 50px;
}

.row-fluid .col-0 + [class*="col"]{
    margin-left: 0;
}

@media all and (max-width:768px) {
    .col-0 {
        width:0;
        padding:0;
        overflow:hidden;
        float:left;
        display:none;
    }
}
</style>

<div class="container-fluid">
<div class="row-fluid">

    <div id="col1" class="col-xs-3 col-md-3">
        Left Column text here<br/>
        Left Column text here<br/>
        Left Column text here<br/>
        Left Column text here<br/>
        Left Column text here<br/>
        Left Column text here<br/>
        Left Column text here<br/>
        Left Column text here<br/>
        Left Column text here<br/>
        Left Column text here<br/>
        Left Column text here<br/>
    </div>

    <div id="col2" class="col-xs-9 col-sm-9">
        <a id="trig" class="btn btn-primary visible-xs">Reflow Me</a><br/>
        Right Column text here<br/>
        Right Column text here<br/>
        Right Column text here<br/>
    </div>

  </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#trig').on('click', function () {
            $('#col1').toggleClass('col-0');
            $('#col2').toggleClass('col-xs-12 col-xs-9');
        });
    });
</script>

  </body>
</html>

Darko · Accepted Answer · 2015-01-08T16:14:49.837

try this

Sorry, small correction in order to make the animation smoother:

fiddle code - live example

CSS:

.row-fluid {
   overflow:hidden;
 }

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

 #col1 {
   background-color: #A6BFBA;
 }

 #col2 {
   background-color: #DE4124;
 }

 #trig {
   margin: 50px;
 }

 .row-fluid .col-0 + [class*="col"]{
   margin-left: 0;
 }

 .offcanvas {
    margin-left:0;
 }

 @media all and (max-width:768px) {
   .col-0 {
       width:0;
       padding:0;
       overflow:hidden;
       float:left;
       display:none;
   }
   .offcanvas {
       margin-left:-25%;
   }
 }

jQuery:

$(document).ready(function() {
    $('#trig').on('click', function () {
        $('#col1').toggleClass('offcanvas');
        $('#col2').toggleClass('col-xs-12 col-xs-9');
    });
});

UPDATE:

@media all and (max-width:768px) {
  .col-0 {
    width:0;
    padding:0;
    overflow:hidden;
    float:left;
    display:none;
  }
  .offcanvas {
    margin-left:-25%;
    height:0px;
    opacity:0;
  }
}

UPDATE #2

if you want to animate sidebar height&opacity change this code too:

.row-fluid div {
  -webkit-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  -moz-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  -o-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease;

 }

The problem when the left column hides the right column still have the white space at the bottom since the left column is taller originally. It should be removed from the dom I think. — daliaessam, Jan 08 '15 at 10:19
The left column when hidden, the right column is still having the same height, I hope you see what I mean. — daliaessam, Jan 08 '15 at 13:50
I accepted your hard work as answer, really very appreciated, the last changes does hides the left column immediately and it does not animate at all as it hides immediately. Can this done by JS code to hide the column after animation. I can post another question if this possible even all the animation by the JS — daliaessam, Jan 08 '15 at 16:05
BTW I just made those adjustments with the code you provided, personally I would use this method for this type of layout http://jasny.github.io/bootstrap/javascript/#offcanvas — Darko, Jan 08 '15 at 16:42
Yes I started by this one but faced a problem and posted a question about it here http://stackoverflow.com/questions/27766900/bootstrap-off-canvas-show-full-height but did not get an answer that's why I started this type of questions, have a look at that question — daliaessam, Jan 08 '15 at 17:03
Check my solution to your question at http://stackoverflow.com/questions/27766900/bootstrap-off-canvas-show-full-height — Darko, Jan 08 '15 at 21:06

Bootstrap two column animation flikers fix

1 Answers1