1

我已经和这个斗争了一段时间了。我已经声明了以下样式。

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，但它们仍然占据空间。

现在，我知道你不由自主地想提出什么建议。“使用显示：无，笨蛋！” 在你上面讨论的那一行。但猜猜怎么了！如果我进行该更改，则不透明度过渡根本没有效果 - 屏幕上不会出现任何内容。

现在，我知道你现在会自发地说什么。“放显示：挡住，朋友！” 在 contentItemVisible 样式中。但猜猜怎么了！如果我进行更改，则不透明度过渡根本没有效果 - div 出现 kaboom 而不是淡入。

我很确定缺少的过渡与元素显示的事实有关：无。所以我尝试修改我的 jQuery 代码，以便在我交换类（contentItemVisible 和 contentItemHidden）之前，我像这样将 block'ification 添加到显示中。

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

尽管如此，这并没有达到预期的效果。如果我稍后不通过.css("display", "none")删除它，我会得到奇怪的位置（因为元素占用空间，即使它们看不到）。如果我确实删除了它，我们将不会获得不透明度的过渡。

我究竟做错了什么？我能做什么呢？

可以在这里看到我想要实现的工作的 jsFiddle （当然，接受我想从不可见的 DIV 开始）。通过将 div.contentItem 的样式更改为无，不透明度的过渡无效。

4

5 回答 5

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并在您的班级中将其切换为1 。contentItemVisible还要使元素具有height: 0px（并为填充和边距添加相同的值），以便在隐藏时不会占用任何空间。当然contentItemHidden，如果您愿意，您可以将所有这些属性移至并切换它们contentItemVisible。

这是上面的示例jsFiddle。

于 2012-08-05T00:58:01.817 回答
1

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

于 2012-08-05T16:27:15.050 回答
0

你可以使用 CSS display: none，你只需要使用$('#bzzz').show()and$('#bzzz').hide()而不是.addClass()and .removeClass()。希望这可以帮助。

于 2012-08-04T23:18:14.653 回答
0

我在幻灯片中遇到了类似的问题。我终于不得不在添加类和display: block.

$(item).show();
window.setTimeout(function(){
    $(item).addClass('active');
}, 100);
于 2013-06-06T14:03:46.300 回答
0

这完全可以通过 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');
}
于 2013-11-06T20:09:07.490 回答