javascript - 使用显示 : none 删除类时的转换

Question

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

.not-update{
            display: none
}

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

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

Here is a jsfiddle这可能有助于更好地了解情况。在这个例子中，为了简单起见，它只会出现一个div，但实际上它可能是多个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);

知道如何实现吗？

Answer 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>

slideDown 的另一种解决方案 https://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>

希望这对你有帮助。