javascript - Jquery:在html页面中更改类时的平滑过渡效果

Question

我有一个 HTML 页面，其中有 3 个 div。最初 2 个可见(col1，col2)，一个隐藏(col3)。单击按钮时，我想隐藏第二个 div，更改第一个的大小并使第三个可见。我想用平滑的过渡效果来做到这一点。 div如下:

<div class="row">
        <div class='col-md-12'>
            <div class="row">
                <div id="col1" class="col-sm-8">
                    <div class="lead">Chart title goes here</div>
                </div>
                <div id="col2" class="col-sm-offset-1 col-sm-3">
                    <div class="lead">Second Div</div>
                    <button id="trig" class="btn btn-contrast">Reflow 
                     Me</button>
                </div>
                <div id="col3" class="col-sm-8 hidden">
                    <div class="lead">Fill form</div>
                </div>
            </div>
        </div>
 </div>

我目前的脚本只更改类，但转换非常突然。

<script>
    $("#trig").click(function(){
        $("#col1").toggleClass("col-sm-offset-1 col-sm-3");
        $("#col2").toggleClass("hidden");
        $("#col3").removeClass("hidden");
    });
</script>

我试过这个链接:http://fiddle.jshell.net/274NN/5/但这对我来说效果不佳。我是 CSS 和 jQuery 的新手，不完全了解该怎么做。请帮忙!

Answer 1

您将缓动设置为 0.3 秒，因此需要 0.3 秒才能完成。我改成了1.0s here .

代码如下:

.row-fluid div {
    height: 200px;
    -webkit-transition: width 1.0s ease, margin 1.0s ease;
    -moz-transition: width 1.0s ease, margin 1.0s ease;
    -o-transition: width 1.0s ease, margin 1.0s ease;
    transition: width 1.0s ease, margin 1.0s ease;
}

请注意，这是使用转换，而不是 JQuery。

如果您在 JQuery 中有一些您希望具体查看的内容，您需要将我们链接到已实现的内容，您提供的代码不包括代码所需的类。