用单选按钮淡化div之间的切换

Question

我有两个DIV，通过两个单选按钮切换可见性。 我无法弄清楚如何使用css转换来在切换DIV时淡入淡出内容。例如，让div淡出到左边，而另一个从右边淡出。

第二个问题是，我试图将div设置为position：absolute，但是两个div之下的内容将被隐藏，我需要隐藏/显示我的两个DIVS下面的内容，总是在下面。所以我认为绝对位置是不行的。

	.div_one,
	.div_two{
		display:none !important;
	}

	#radio_one:checked ~ .div_one,
	#radio_two:checked ~ .div_two{
		display:block !important;

	}    	

	.div_one{
	  background-color:grey;
	}
	.div_two{
	  background-color:orange;
	}

	#below{
	  background-color:pink;
	}

	<input type="radio" name="tabs" id="radio_one"  checked="checked"/>
	<label for="radio_one" >01</label>

	<input type="radio" name="tabs" id="radio_two" />
	<label for="radio_two" class="">02</label>

	<div class="div_one">
	  div one
	</div>

	<div class="div_two">
	  div two<br/><br/>
	</div>

	<div id="below">i need to be below the above block, regardless of their height.</div>

提前感谢！

Answer 1

如果您希望在一个div向侧面滑动而另一个滑入其中时想要制作动画，通常会将它们放在父div中（通常称为track）是其父级宽度的两倍，然后使用transform: translateX()来移动其位置。提供曲目overflow: hidden;也很重要。现在你不需要给幻灯片一个绝对的位置。

关于赛道高度，我添加了一个JS片段，可根据显示的项目更改高度。

示例：

＆＃13;

＆＃13;

const track = document.getElementById('track');
const slides = document.querySelectorAll('#track > .slide');
const buttons = document.querySelectorAll('.radio_button');

buttons.forEach((button, idx) => {
  button.addEventListener('click', () => {
    let height = slides[idx].offsetHeight;
    track.style.height = height + 'px';
  });
});

＆＃13;

* {
  overflow: hidden;
}

#track {
  width: 200%;
  transition: all 0.3s ease;
  overflow: hidden;
  height: 1em;
}

.slide {
  width: 50%;
  display: inline-block;
  float: left;
}

#radio_one:checked~#track {
  transform: translateX(0%);
}

#radio_two:checked~#track {
  transform: translateX(-50%);
}

#div_one {
  background-color: grey;
}

#div_two {
  background-color: orange;
}

#below {
  background-color: pink;
}

＆＃13;

<input type="radio" name="tabs" class="radio_button" id="radio_one" checked="checked" />
<label for="radio_one">01</label>

<input type="radio" name="tabs" class="radio_button" id="radio_two" />
<label for="radio_two" class="">02</label>



<div id="track">
  <div class="slide" id="div_one">
    div one
  </div>

  <div class="slide" id="div_two">
    div two
    <br/>
    <br/>
  </div>

</div>

<div id="below">i need to be below the above block, regardless of their height.</div>

＆＃13;

＆＃13;

＆＃13;