Bootstrap 两列动画flikers修复

Question

我有 Bootstrap 两列网格。完整 jsfiddle code here.

使用此代码应用动画的问题：

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;
}

当showing/toggling左栏时，右栏在拉伸时除了左栏外从下到上闪烁弹出。

如果我只是禁用此 CSS 则没有动画，并且不会注意到该过程，因为它们切换很快。

如何在不显示列闪烁的情况下添加动画。

完整代码：

<!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>

Answer 1

试试这个

抱歉，为了让动画更流畅，小修正一下：

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');
    });
});

更新：

@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;
  }
}

更新 #2

如果你想设置侧边栏高度和不透明度的动画，请更改此代码：

.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;

 }

Bootstrap 两列动画flikers修复

Bootstrap two column animation flikers fix

html

javascript

css

jquery

twitter-bootstrap