javascript - 有没有办法交叉淡化相对定位的 div(具有动态高度)？

Question

我想做的是同时淡出 div 1 和淡入 div 2，相互叠加...

两个 div 都是相对的并且垂直堆叠 - 这些 div 中的内容也可能会不断变化，因此固定边距、高度等将不起作用...

这是一个 fiddle :https://jsfiddle.net/jwzwycdm/

我添加了 height: 0 但它完全杀死了淡入淡出动画:

   div { height: 0px; 
         opacity: 0; 
         transition: opacity 0.5s; }

  .active { height: 100%;
            opacity: 1;
            transition: opacity 0.5s; }

这正是我想要达到的效果 - 使用绝对定位可以解决问题，但会完全破坏可能位于这两个下方的任何元素:

https://jsfiddle.net/jwzwycdm/3/

Answer 1

您需要使用 position:relative 将 2 个 DIV 嵌套在父 DIV 中。然后使两个子 DIV position:absolute。见代码:

https://jsfiddle.net/jwzwycdm/5/