Bootstrap两列动画修补程序修复(Bootstrap two column animation flikers fix)
我有两列的Bootstrap网格。 完整的jsfiddle代码在这里 。
使用此代码应用动画的问题：
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>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>最满意答案
试试这个
对不起，小修正，以使动画更流畅：
小提琴代码 - 现场例子
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; }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; }更多推荐
发布评论