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

【问题标题】：Jquery: Smooth transiton effect while changing classes in html pageJquery：在html页面中更改类时平滑过渡效果
【发布时间】：2017-10-27 21:06:45
【问题描述】：

我有一个 HTML 页面，其中有 3 个 div。最初 2 个是可见的（col1，col2），一个是隐藏的（col3）。单击按钮时，我想隐藏第二个 div，更改第一个 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 的新手，并不完全了解该怎么做。请帮忙！

【问题讨论】：

你提到的小提琴到底有什么问题？你不了解 CSS，或者你不能让它在你自己的项目中工作吗？如果是后者，您应该提供项目中的 CSS，以便更容易帮助您！ :)
我无法理解如何在我的 HTML 页面上应用这个小提琴。我尝试应用小提琴中给出的不同类，但所有元素的对齐都会受到干扰。我只想在 div 之间进行简单的转换。我没有在页面中包含任何其他 CSS。
我看到了你的问题。我添加了一个可能对您有所帮助的答案。 :)

标签： javascript jquery html css

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

【讨论】：

【解决方案2】：

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

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

基本上，这就是当你点击按钮时：

在 ID 为 col1 的 div 上从 col-sm-8 切换（切换）到 col-sm-offset-1 col-sm-3。
隐藏 ID 为 col2 的 div，这基本上是将类 hidden 附加到该 div。我建议不要在这个上使用动画，以避免过多的冲突动画！
从 ID 为 col3 的 div 中删除类 hidden。注意到 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。也许这会是一个更好的解决方案？

【讨论】：