Jquery 不透明度转换需要预设的显示块

我已经为此奋斗了一段时间了。我已经声明了以下样式

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！”。但是你猜怎么着！如果我做了更改，不透明度转换根本没有效果-屏幕上没有显示任何内容

现在，我知道你会自然而然地说什么了。以contentItemVisible样式显示“block，friend！”。但是你猜怎么着！如果我做了更改，不透明度转换根本没有效果-div显示为kaboom而不是淡入

我非常确定缺少的转换与元素是display:none这一事实有关。因此，我尝试修改jQuery代码，以便在交换类（contentItemVisible和contentItemHidden）之前，向显示中添加块化，如下所示

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

不过，这并没有达到预期效果。如果我以后不通过.css（“display”，“none”）删除它，我会得到一个奇怪的位置（因为元素占据了空间，即使它们看不见）。如果我删除它，我们就不会得到不透明度的过渡

我做错了什么？我能做些什么呢

---

可以看到我正在努力实现的部分工作（当然，请接受我想从不可见的DIV开始）。通过将div.contentItem的样式更改为无，不透明度的转换将无效。

您可以使用CSS

display:none

，您只需使用

$（'#bzzz'）。show（）

和

$（'#bzzz'）。hide（）

而不是

。addClass（）

和

。removeClass（）

。希望这有帮助。

您可以尝试以下方法：

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

类。默认情况下，只需将

不透明度设置为0，然后在
contentItemVisible
类中将其切换为1。还要使元素具有
高度：0px
（并加入相同的填充和边距，以便更好地测量），以便隐藏时不会占用任何空间。当然，您可以将所有这些属性移动到
contentItemHidden
，然后在
contentItemVisible
中切换它们，如果您希望这样做的话

这是上面的一个例子
 我们这里有很多很好的建议，但在结论中，我不相信我在其他地方收到的关于使用CSS转换解决问题的建议是好的。我在JS中使用了
.fadeIn（）
和
.fadeOut（）
，这使它能够工作。尽管如此，这里还是有一些有价值的信息。
我在幻灯片中也遇到了类似的问题。最后，我不得不在添加类和
显示：block
之间使用计时器

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

这完全可以通过CSS转换实现。动画完成后需要设置“显示：无”，并在动画开始前应用“显示：块”

CSS:

JS:

如果你能提供一个答案，这会容易得多。我担心有人会说。。。我希望在这之前，其他人会意识到该怎么做。我会犹豫一会儿，我的回答是，这类问题通常是在这个耗时的步骤中解决的，因为它需要一定的刚性。这是必要和有用的。不要害怕。实际上还不清楚想要的效果是什么。我猜你有很多不同的内容项，你一次只想显示一个，你想淡出它们。但是容器的高度是固定的，还是你想让它跟踪可见的物品？@Neil正是这样。高度应与内容一致。我希望一次显示一个DIV。添加/删除类是为了使转换生效。我尝试为.show（）更改css（“显示”、“块”），但效果相同。对不起，好主意，但不行。问题是，元素应该逐渐消失，然后从空间占用中消失。我开始相信CSS转换是一种错误的方式。如果你想从DOM中删除元素，那么你不能用CSS真正做到这一点。你必须走JavaScript的路。您可以监听
WebKittTransitionEnd
事件（Firefox上的
transitionend
）在转换结束时收到通知，并从DOM中删除元素。
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;
}

// 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');
}