选项卡背景色幻灯片过渡到下一个选项卡答案

【问题标题】：Tabs background-color slide transition to next tab选项卡背景色幻灯片过渡到下一个选项卡
【发布时间】：2018-03-23 07:47:35
【问题描述】：

我正在尝试实现背景转换，当您单击选项卡时，当前选项卡的背景会滑动到单击的选项卡。有人可以帮忙吗？

*,
*:before,
*:after {
  box-sizing: border-box;
}

.radio_wrap {}

input {
  position: absolute;
  opacity: 0;
}

label {
  min-width: calc(100% / 4);
  position: relative;
  float: left;
  text-align: center;
  text-shadow: none;
  padding: 20px;
  border: 1px solid #dfe0e4;
  color: grey;
  font-size: 14px;
  position: relative;
  transition: background-color .3s ease-in-out;
}

input:checked+label {
  background: grey;
  color: white;
}

<div class="radio_wrap">
  <input type="radio" id="radio1" name="radio1">
  <label for="radio1">tab1</label>
  <input type="radio" id="radio2" name="radio1">
  <label for="radio2">tab2</label>
  <input type="radio" id="radio3" name="radio1">
  <label for="radio3">tab3</label>
  <input type="radio" id="radio4" name="radio1">
  <label for="radio4">tab4</label>
</div>

【问题讨论】：

澄清一下，您提供的代码笔没有“幻灯片”过渡。它只是让背景颜色淡入。
是的，但不是让它淡入，是否可以让它在点击时滑动到下一个标签？

标签： css css-transitions css-animations

【解决方案1】：

这是一个带有伪元素和 CSS 变量的想法：

$('label').click(function() {
   $('.radio_wrap').attr('style','--i:'+$(this).data('i'));
})

*,
*:before,
*:after {
  box-sizing: border-box;
}

input {
  position: absolute;
  opacity: 0;
}
.radio_wrap {
 position:relative;
 overflow:hidden;
 z-index:0;
 --i:-1;
}
.radio_wrap:before {
  content:"";
  position:absolute;
  z-index:-1;
  width: calc(100% / 4);
  top:1px;
  left:calc( var(--i) * (100% / 4));
  height:100%;
  background:grey;
  transition:.3s ease-in-out;
}

label {
  min-width: calc(100% / 4);
  position: relative;
  z-index:2;
  float: left;
  text-align: center;
  text-shadow: none;
  padding: 20px;
  border: 1px solid #dfe0e4;
  color: grey;
  font-size: 14px;
  position: relative;
  transition: color .3s ease-in-out;
}

input:checked+label {
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio_wrap">
  <input type="radio" id="radio1" name="radio1">
  <label for="radio1" data-i="0">tab1</label>
  <input type="radio" id="radio2" name="radio1">
  <label for="radio2" data-i="1">tab2</label>
  <input type="radio" id="radio3" name="radio1">
  <label for="radio3" data-i="2">tab3</label>
  <input type="radio" id="radio4" name="radio1">
  <label for="radio4" data-i="3">tab4</label>
</div>

【讨论】：