CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
daliaessam
daliaessam

Reputation: 1666

Bootstrap two column animation flikers fix

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>

Upvotes: 0

Views: 2073

Answers (1)

Darko
Darko

Reputation: 930

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;

 }

Upvotes: 4

Related Questions