Javascript 如何使用CSS转换切换重叠元素？_Javascript_Html_Css

Javascript 如何使用CSS转换切换重叠元素？

javascript html css

Javascript 如何使用CSS转换切换重叠元素？,javascript,html,css,Javascript,Html,Css,以下是场景：在父元素中有四个元素相互重叠，如下所示： <body class="one"> <div id="overlapping"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four"

以下是场景：在父元素中有四个元素相互重叠，如下所示：

<body class="one">
    <div id="overlapping">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
    </div>
    ...

.one, .two, .three, .four { display: none; }
body.one .one,
body.two .two,
body.three .three,
body.four .four {
    display: block;
}

然后有一些javascript和一些按钮来切换“body”上的类

这非常有效，除了我想使用css转换在块之间切换。它们的高度不均匀（未知），所以我无法在高度上设置动画。出于某些原因，我不希望硬编码任何宽度，而过渡在

显示上也不起作用
我无法在可见性
或不透明度
上设置动画，因为重叠的元素在隐藏或透明时继续占用布局中的空间：也就是说，除非不可见的元素具有显示：无
，否则它们不会真正重叠
（一个有效的解决方案是css将所有元素放置在#overlapping
的左上角，遵守正常的文本包装规则，使#overlapping
展开以容纳它们，就好像它们不是位置：绝对的
。到目前为止，我还没有找到这样的方法。）
那么如何设置开关的动画呢？有没有办法使用CSS，或者我必须求助于js动画？
到目前为止，我找到的最佳解决方案如下（语法更少）：
它恰好起作用，因为我所有的内部div都是相同的高度（尽管是可变的）。我仍然想要一个通用的解决方案，但似乎没有人知道。
我相信css3中可能有一些动画，但我认为最好使用JQuery
GooglejQueryAPI.animate
$(".one").animate({opacity: 0.4, display: "block"} , 1500);

$(".two").animate({opacity: 0.4, display: "none"} , 1500);

玩弄你的变化
将div的位置设置为relative也可能有助于更好地重叠
如果你不告诉我你还需要什么的话，我希望这会有所帮助。我知道第一个是#overlapping>div
，但我想在这个问题上更明确一些。至于第二个，我不认为你是对的：.one
类在body上，而不是#overlapping
，因为body中还有其他元素也在转换……因为.three
只应该在body
也有的时候显示。three
。对于one
、two
和four
也类似。无法将它们全部压缩到一个二进制displayToggle类中。我不知道还有什么比我上面写的更简单的方法。因为元素在透明时会占用空间，而重叠的元素最终会堆积起来。谢谢。我在寻找一个非jquery的解决方案。我使用下面的解决方案解决了这个问题，并调整了标记，使height:100%是理想的。这对我来说是可行的，因为我所有的重叠元素共享一个高度，但它仍然不是一个通用的解决方案。
$(".one").animate({opacity: 0.4, display: "block"} , 1500);

$(".two").animate({opacity: 0.4, display: "none"} , 1500);