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中有某些内容，您需要专门查看，您需要将我们链接到已实现的内容，您提供的代码不包含代码所需的类。

Answer 2

因此，鉴于您的HTML和脚本，我建议您稍微更改一下脚本：

$("#trig").click(function(){
    $("#col1").toggleClass("col-sm-offset-1 col-sm-3");
    $("#col2").hide();
    $("#col3").show(2000);
});

基本上这样做是当你点击按钮时：

在ID为col-sm-8的div上从col-sm-offset-1 col-sm-3切换到col1。
隐藏ID为col2的div，这样做基本上会将类hidden附加到该div。我建议不要在这个上使用动画来避免太多冲突的动画！
从ID为hidden的div中删除课程col3。注意show函数中的参数2000？这意味着它应该使用2秒来显示这个div。

此外，我添加了一些非常基本的CSS，以便在div上切换类时允许动画。在这种情况下，它是ID为col1的div。

#col1 {
  background: red;
}

#col2 {
  background: green;
}

#col3 {
  background: blue;
  display: none;
}

[class*='col-sm'] {
  transition: all 2s;
}

工作小提琴：

https://jsfiddle.net/DTcHh/38884/

哦，顺便说一下：

请注意我对竞争动画的意思？当多个动画同时运行时，它会滞后。

您可以实现事件侦听器，以便在删除第一个div时在新div中启动动画，或者可以使用jQuery fadeIn()和fadeOut()，因为它们可以在完成后添加一个函数。

例如：

$('#col2').fadeOut(2000, function() {
  $('#col3').fadeIn(2000);
});

它的作用是淡化ID为col2的div，一旦不再可见，它就会在ID为col3的div中开始消失。也许这会是一个更好的解决方案？

Jquery：在html页面中更改类时平滑过渡效果

2 个答案: