Bootstrap 两列动画闪烁修复答案

【问题标题】：Bootstrap two column animation flikers fixBootstrap 两列动画闪烁修复
【发布时间】：2015-01-08 01:38:32
【问题描述】：

我有两列的 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;
}

当显示/切换左列时，右列会闪烁，并在拉伸时除了左列之外从下到上弹出。

如果我只是禁用此 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>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案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;

 }

【讨论】：

左列隐藏右列的问题，由于左列原本较高，底部仍有空白。我认为它应该从 dom 中删除。
左栏隐藏后，右栏还是一样高，希望你明白我的意思。
我接受了您的辛勤工作作为答案，非常感谢，最后的更改确实立即隐藏了左列并且它根本没有动画，因为它立即隐藏了。这可以通过 JS 代码来完成，以在动画后隐藏列。如果可能的话，我可以发布另一个问题，即使是 JS 的所有动画
顺便说一句，我刚刚使用您提供的代码进行了这些调整，我个人会将此方法用于此类布局jasny.github.io/bootstrap/javascript/#offcanvas
是的，我是从这个开始的，但遇到了一个问题，并在这里发布了一个关于它的问题stackoverflow.com/questions/27766900/…，但没有得到答案，这就是我开始这类问题的原因，看看那个问题