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

【问题标题】：Transition when switching classes in Twitter Bootstrap 3在 Twitter Bootstrap 3 中切换类时的转换
【发布时间】：2015-03-24 08:55:48
【问题描述】：

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

【问题讨论】：

标签： javascript jquery css twitter-bootstrap-3 css-transitions

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

【讨论】：

好主意，从来没想过。但是，如果您只需要一个简单的动画，那么包含 jQuery UI 可能有点过头了。
@KevinPei：OP 可以 customize build 并且只包含该功能以使其更轻量级。
很公平。猜猜我的表演狂热正在影响我：P
这也很好用，但 CSS 过渡规则肯定更轻量级。但如果我需要更多效果，我会考虑 UI。顺便说一句，当下面的调整大小的 DIV 也向上移动时，有什么方法可以为消失的 DIV 设置动画（添加隐藏类）？
@Daniele 我不确定我明白你的意思。喜欢fadeTo？

【解决方案2】：

尝试 CSS 过渡以获得良好的性能：

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

http://jsfiddle.net/cm3oc7vh/

【讨论】：

这比我想象的要容易得多！不过，我只有另一个小问题：当 div 调整大小时，我还在添加“隐藏”类的上方隐藏了一个大 div，因此调整大小的 div 在顶部移动。我也尝试将转换属性应用于隐藏类，但这不起作用。有什么方法可以让它随着其他 div 的增长而慢慢消失？谢谢。
先把上面的div的高度设置为0，然后等多久你想要动画，然后隐藏它
我怎么想不到呢？ :D 但是，仍然无法正常工作； jumbotron div 不想缩小到 0，无论如何都会停止到最小高度。我尝试使用高度和最小高度：0，并隐藏溢出，但没有运气..：/
隐藏时尝试将边距和内边距都设置为0