Question

这是场景：我在父元素中有四个元素彼此重叠，如下所示：

<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和一些按钮来切换'body'上的类。

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

我无法在visibility或opacity上制作动画，因为重叠的元素会在隐藏或透明的情况下继续占用布局中的空间：即它们并非真正重叠，除非隐形元素具有{ {1}}。

（一个有效的解决方案是css将所有元素放在display: none的左上角，遵循正常的文本换行规则，使#overlapping扩展为将它们保持为如果他们不是#overlapping。我还没有找到这样的方法。）

那么如何设置开关动画？有没有办法使用CSS，还是我必须使用js动画？

Answer 1

到目前为止，我找到的最佳解决方案如下（语法较少）：

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都是相同的（尽管是可变的）高度。我仍然喜欢一般的解决方案，但似乎没有人知道。

Answer 2

我相信在css3中有一些动画可能，但我认为使用JQuery更好

google jQuery API .animate

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

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

随着玩具的变化而玩具玩具......

它可能也有助于将div的位置设置为relative，以便更好地重叠

我希望它有所帮助，如果没有告诉我你还需要什么

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

2 个答案: