删除 class 时的转换显示：none

Question

我有一个 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);

知道如何实现吗？

Answer 1

问题出在盒子法上。尝试 slideDown() 使框显示缓慢。

举个例子，你有这个！

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

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

Answer 2

这可能会对您有所帮助 @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>

希望这对您有所帮助。

Answer 3

.fadeTo("slow", 1) 基于不透明度。我建议你使用两个 classes:

.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; }

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

片段：

$('#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>

Answer 4

虽然 "display: none" 没有从 DOM 中删除该元素，但它确实从页面布局中删除了该元素，因此无法对其进行动画处理。您可以先用 "display: none" 删除 class，然后再制作动画。像这样：

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

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

您的 fiddle 已更新：https://jsfiddle.net/f2561ncf/

删除 class 时的转换显示：none

Transition when removing class with display: none

javascript

jquery

transition

试炼