html - 使用单选按钮在 div 之间淡入淡出切换

Question

我有两个 DIV，可以通过两个单选按钮切换可见性。我无法弄清楚如何在切换 DIV 时使用 css transition 使内容淡入淡出。例如，让 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 中(通常称为轨道)是其父宽度的两倍，然后使用 transform: translateX() 移动其位置。给轨道 overflow: hidden; 也很重要。现在您无需为幻灯片指定绝对位置。

关于轨道高度，我添加了一个 JS 片段，它会根据显示的元素改变高度。

示例:

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';
  });
});

* {
  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;
}

<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>