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

这里的情景：我有四个单元重叠的一个的其他的父元素，像这样：如何使用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">4</div> 
    </div> 
    ...

的CSS看起来有点像这样：

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

再有就是一些javascript和一些按钮可以在“身体”上切换课程。

这很好，除了我想使用css转换在块之间切换。它们的高度不均匀（并且未知），所以我不能在高度上进行动画制作。我宁愿不硬编码任何宽度为responsive的原因，并且转换不能在display仍然工作。

我不能visibility或opacity动画，因为重复的部分继续，而隐藏或透明占用空间布局：即它们不是真正的重叠，除非那些看不见有display: none。

（一个工作解决方案是CSS来在#overlapping左上角的所有元素的位置，服从正常的文字环绕规则，在彼此的顶部，这样#overlapping扩展以容纳他们，如果他们不position: absolute。我还没有找到这样的方法。）

那么我该如何为开关设置动画？有没有用CSS的方法，还是我不得不求助于js动画？

来源

2012-03-15 So8res

仅供参考，您的css解决方案相当于'#overlapping> div {display：none; } #overlapping> div.someclasstoadd {display：block; }' – Will 2012-03-15 04:13:49

我知道第一个是'#overlapping> div'，但我想在问题中更加明确。至于第二个，我不认为你是正确的：'.one'类在主体上，而不是'＃overlapping'，因为在主体中还有其他元素也在转换。 – So8res 2012-03-15 04:18:29

好的，但是将嵌套div的类添加到body元素对我来说毫无意义。为什么不使用'body.displaytoggle #overlapping> div {display：block; }'？ – Will 2012-03-15 04:32:37

到目前为止，我已经找到了最好的解决办法如下（少语法）：

body { 
    #overflow > div 
    height: 0; 
    opacity: 0; 
    } 

    &.one .one, 
    &.two .two, 
    &.three .three, 
    &.four .four { 
    height: 100%; 
    opacity: 1; 
    } 
} 

#overflow { 
    overflow: hidden; 
    div { 
    transition: height .9s; 
    transition: opacity .9s; 
    overflow: hidden; 
    display: block; 
    } 
}

它发生在工作，因为我所有的内心的div是相同的（尽管变量）的高度。我仍然喜欢一个通用的解决方案，但似乎没有人知道。

来源

2012-03-15 15:44:04 So8res

我相信有可能在CSS3一些动画，但我认为它能够更好地使用JQuery

谷歌jQuery的API .animate各地升技

$(".one").animate({opacity: 0.4, display: "block"} , 1500); 

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

玩具什么的变化？

它也可能有助于设置div的位置为相对以重叠更好

我希望它可以帮助，如果不告诉我你还需要什么

来源

2012-03-15 15:52:29 MakuraYami

谢谢。我正在寻找一个非jquery解决方案。我能够解决下面的解决方案的问题，并通过调整标记，使得高度：100％是可取的。这发生在我身上，因为我所有的重叠元素都有一个高度，但它仍然不是一个通用的解决方案。 – So8res 2012-03-20 18:09:42

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

回答

相关问题