如何淡出div，然后在相同位置淡入另一个div。仅CSS [英] How to fade out a div, then fade in another in the same location. CSS only

问题描述

我正在尝试淡出div，然后在仅使用CSS完全淡化后再淡入另一个div来替换它。但是，两个div消失后，它们似乎仍会在页面上保留它们的空间。我似乎可以摆脱它们空间的唯一方法是使用 display：none; ，但这不是动画。目前，我正在使用CSS动画更改元素的不透明度，例如：

I am trying to fade a div out and then fade another div in to replace it once it has completely faded using CSS only. However, both divs still seem to keep their space on the page once they have faded out. The only way I can seem to get rid of their space is with display: none;, but this isn't animatable. At the moment, I am using CSS animation to alter the opacity of the elements, e.g.:

.first {
  animation: fadeOut 8s ease;
}

@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

这里是我到目前为止的小提琴。如您所见，这3列会在下面淡入，而不是淡出的按钮的位置。< br>
有关更多信息，我有3个垂直居中的列，但在移动式的列上除外。页面加载上显示的按钮应在垂直和水平方向居中。

预先感谢

Here is a fiddle with what I have so far. As you can see, the 3 columns fade in below, not in-place of the faded out button.
For more context, I have 3 columns, vertically centred, except for on mobile where they are stacked. The button that is display on page load should be vertically and horizontally centred.
Thanks in advance

推荐答案

对两个DIV使用 position：absolute ，以使它们都位于同一位置。 （并且将父DIV的 position：相对用作位置定位符）

Use position: absolute for the two DIVs to allow them to be both at the same position. (and position: relative for the parent DIV to make it serve as the position anchor)

这篇关于如何淡出div，然后在相同位置淡入另一个div。仅CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！