在 Twitter Bootstrap 中切换类时的转换 Bootstrap 3

Question

我正在使用 Twitter Bootstrap 3 并且有一个 DIV 包含图片或视频。 div 是 col-sm-3，但是使用 jQuery 我在悬停时将 class 切换为 col-sm-12。有什么方法可以使过渡更平滑并在调整大小时添加一些效果吗？谢谢

Answer 1

您始终可以使用 jQuery-UI 和 switchClass 方法。这将动画化样式的差异。

$(function($){
    $('#switch').on('click',function(e){
        var $p = $('#target')
        if($p.is('.foo')){
            $p.switchClass('foo','bar',1000);
        }else{
            $p.switchClass('bar','foo',1000);
        }
        e.preventDefault();
    });
});

.foo { color: red; font-size: 150%; }
.bar { color: blue; font-size: 100%; }

<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<p id="target" class="foo">Hello, world!</p>
<button id="switch">Switch</button>

Answer 2

尝试 CSS 转换以获得良好性能：

.col-sm-3, .col-sm-12{
    transition: all 200ms; //replace 200ms with time of your choice
}

http://jsfiddle.net/cm3oc7vh/

在 Twitter Bootstrap 中切换类时的转换 Bootstrap 3

Transition when switching classes in Twitter Bootstrap 3

javascript

css

jquery

css-transitions

twitter-bootstrap-3

在 Twitter Bootstrap 中切换 类 时的转换 Bootstrap 3

Transition when switching classes in Twitter Bootstrap 3

javascript

css

jquery

css-transitions

twitter-bootstrap-3

在 Twitter Bootstrap 中切换类时的转换 Bootstrap 3