Question

我一直在与此斗争一段时间。我宣布了以下风格。

div.contentItem{
  -webkit-transition: opacity 1.0s ease;
  display: block; // this line will be discussed below
}

div.contentItemHidden{
  opacity: 0;
}

div.contentItemVisible{
  opacity: 1;
}

对于一个小小的问题，它的工作原理应该是除了。包含内容的不同div显示低于。由于在contentItemHidden样式中将不透明度设置为0，因此无法真正看到其他div，但它们仍占据空间。

现在，我知道你自发想要提出的建议。 “使用display：none，dummy！”就在您上面讨论的那一行。但猜猜怎么了！如果我进行了更改，则不透明度转换根本不起作用 - 屏幕上不显示任何内容。

现在，我知道你现在会自发地说些什么。 “将display：block，friend！”放在contentItemVisible样式中。但猜猜怎么了！如果我进行了更改，则不透明度转换根本没有效果 - div显示为kaboom而不是淡入。

我很确定缺少的转换与元素display：none的事实有关。所以我试着修改我的jQuery代码，以便在我交换类（contentItemVisible和contentItemHidden）之前，我就像这样在显示器上添加block'ification。

$("#bzzz")
  .css("display", "block")
  .removeClass("contentItemHidden")
  .addClass("contentItemVisible");

但是，这还没有达到预期的效果。如果我稍后不通过 .css（“display”，“none”）删除它，我会得到奇怪的位置（因为元素占用空间，即使它们无法看到）。如果我删除它，我们就不会获得不透明度的转换。

我做错了什么？我该怎么办？

我正在尝试实现的工作jsFiddle here（接受我想从隐形DIV开始，当然）。通过将div.contentItem的样式更改为none，不透明度的转换无效。

Answer 1

您可以尝试这样的事情：

div.contentItem {
 -webkit-transition: opacity 1.0s ease; 
 opacity: 0;
 height: 0;
 width: auto;
 margin: 0;
 padding: 0;
}

div.contentItemVisible {
 opacity: 1;
 width: auto;
 height: auto;
}

我从上面的帖子中收集到的是你真的不需要contentItemHidden课程。只需将opacity设置为 0 ，然后在contentItemVisible课程中将其切换为 1 。还要使元素具有height: 0px（并且为了良好的度量而使用填充和边距相同），以便在隐藏时不会占用任何空间。当然，您可以将所有这些属性移至contentItemHidden，并在contentItemVisible中切换它们，如果这是您想要的方式。

以上是上述示例jsFiddle。

Answer 2

我们在这里有很多很棒的建议但是在结论中，我不相信我在其他地方收到的有关使用CSS过渡解决问题的提示是好的。我在JS中使用了.fadeIn()和.fadeOut()，这使它成功了。不过，这里有一些有价值的信息。

Answer 3

您可以使用CSS display: none，您只需使用$('#bzzz').show()和$('#bzzz').hide()而不是.addClass()和.removeClass()。希望这会有所帮助。

Answer 4

我在幻灯片中遇到了类似的问题。我最后不得不在添加类和display: block之间使用计时器。

$(item).show();
window.setTimeout(function(){
    $(item).addClass('active');
}, 100);

Answer 5

通过CSS过渡完全可以实现。动画结束后需要设置display：none，并在启动前应用display：block。

CSS：

div.contentItem{
  -webkit-transition: opacity 1.0s ease;
  display: block; // you don't need this. div is display:block by default
}

div.contentItemHidden{
  opacity: 0;
}

// you don't need this class. div will be opacity:1 by default
div.contentItemVisible{
  opacity: 1;
}

JS：

// ex. usage
var bzzz = $('#bzzz');
hideItem(bzzz);
showItem(bzzz);

// how we do it
function hideItem(element){
    // listen for fadeout finish
    element.on('webkitTransitionEnd',function(){
        // when it's finished call function to hide the element and remove listener
        removeDisplay(element)
    });
    // start hide css transition
    element.addClass('contentItemHidden');
}

function showItem(element){
    // set to block (item will still have 0 opacity)
    element.css('display', 'block');
    setTimeout(function(){
        element.removeClass('contentItemHidden');
    },0); // setTimeout is used so display:block is executed before starting the transition
}

function removeDisplay(element){
    bzzz.off('webkitTransitionEnd',removeDisplay);
    bzzz.css('display','none');
}

不透明度的过渡需要预设的显示块

5 个答案: