删除类时的转换显示：无答案

【问题标题】：Transition when removing class with display: none删除类时的转换显示：无
【发布时间】：2018-01-20 21:35:05
【问题描述】：

我有一个 div 列表，其中一些通过 class: "not-updated" 隐藏，而另一些则可见。

.not-update{
            display: none
}

在某些时候，由于一些 AJAX 调用，一些隐藏的 div 可能会通过删除 class: "not-updated" 来显示。

但是，我希望它们出现过渡，类似于 .fadeTo("slow", 1) 的情况。

Here is a jsfiddle 这可能有助于更好地了解情况。在这个例子中，为了简单起见，它只会出现一个 div，但实际上它可以是多个，并且是随机的。

试验

如您所见，我尝试了this suggestion，但没有成功：

.box{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

This one也没有帮助：

$(this).removeClass('not-updated',1000);

知道如何实现吗？

【问题讨论】：

首先，要使 CSS 动画起作用，插入时必须隐藏元素，然后必须删除类。为removeClass 制作动画的其他示例需要 jQuery UI。
另请注意，转换不适用于 display 属性

标签： javascript jquery transition

【解决方案1】：

这可能对您有帮助 @keyframes https://jsfiddle.net/gm3Lb02y/1/

$('#updater').click(function() {
    $('#box7').removeClass('not-updated');
});

.box{
    border: 1px solid black;
    width: 350px;
    height: 40px;
    -webkit-animation: fadeAnimation 3s;
}

.not-updated{
    display: none;
}

@-webkit-keyframes fadeAnimation {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="box">Box1</div>
<div id="box2" class="box not-updated">Box2</div>
<div id="box3" class="box">Box3</div>
<div id="box4" class="box not-updated">Box4</div>
<div id="box5" class="box not-updated">Box5</div>
<div id="box6" class="box">Box6</div>
<div id="box7" class="box not-updated">Box7</div>
<div id="box8" class="box">Box8</div>

<br>
<button id="updater">
Click me
</button>

slideDownhttps://jsfiddle.net/gm3Lb02y/3/ 的另一种解决方案

$('#updater').click(function() {
    $('#box7').slideDown('3000').removeClass('not-updated');
});

.box{
    border: 1px solid black;
    width: 350px;
    height: 40px;
}

.not-updated{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="box">Box1</div>
<div id="box2" class="box not-updated">Box2</div>
<div id="box3" class="box">Box3</div>
<div id="box4" class="box not-updated">Box4</div>
<div id="box5" class="box not-updated">Box5</div>
<div id="box6" class="box">Box6</div>
<div id="box7" class="box not-updated">Box7</div>
<div id="box8" class="box">Box8</div>

<br>
<button id="updater">
Click me
</button>

希望这对你有帮助。

【讨论】：

我发现您的第二种方法最好，因为它与 Cristiano 的回复中的效果相同，但修改较少。不幸的是，不知何故它不适用于我的真实代码。

【解决方案2】：

.fadeTo("slow", 1) 是基于不透明度的。我建议你使用两个类：

.not-updated{ visibility: hidden; opacity: 0; height: 0px; border: 0px; }
.updated{ visibility: visible; opacity: 1; transition: opacity 2s ease-in-out; -moz-transition: opacity 2s ease-in-out; -webkit-transition: opacity 2s ease-in-out; }

您可以从第一类切换到第二类，在transitionend 上您可以删除切换的类。

sn-p：

$('#updater').click(function() {
  $('.box.not-updated:first').toggleClass('not-updated updated').on('transitionend', function(e) {
      this.classList.remove('updated');
  });
});

.box{
    border: 1px solid black;
    width: 350px;
    height: 40px;
}

.not-updated{
    visibility: hidden;
    opacity: 0;
    height: 0px;
    border: 0px;
}
.updated{
    visibility: visible;
    opacity: 1;
    transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -webkit-transition: opacity 2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="box1" class="box">Box1</div>
<div id="box2" class="box not-updated">Box2</div>
<div id="box3" class="box">Box3</div>
<div id="box4" class="box not-updated">Box4</div>
<div id="box5" class="box not-updated">Box5</div>
<div id="box6" class="box">Box6</div>
<div id="box7" class="box not-updated">Box7</div>
<div id="box8" class="box">Box8</div>

<br>
<button id="updater">
    Click me
</button>

【讨论】：

【解决方案3】：

虽然 "display: none" 不会从 DOM 中移除元素，但它确实会从页面布局中移除它，所以它不能被动画化。您可以先使用“显示：无”删除该类，然后制作动画。像这样的：

$('#updater').click(function() {
    $('#box7').removeClass('not-updated');

    setTimeout(function() {
    $('#box7').addClass('box-updated');
  }, 0);
});

您的小提琴已更新：https://jsfiddle.net/f2561ncf/

【讨论】：

【解决方案4】：

问题是盒子方法。试试 slideDown() 让盒子看起来很慢。

举个例子，你有这个！

var time = 1000;
$("#updater").click(function(){
    $("#box7").slideDown(time);
});

这将使它比 webkit 建议更容易编辑！如果你的目标是纯 CSS 方法，还有W3Schools CSS Slow Hover

【讨论】：