单选按钮上的动态 CSS 动画答案

【问题标题】：dynamic css animation on radio button单选按钮上的动态 CSS 动画
【发布时间】：2018-04-12 12:58:24
【问题描述】：

有没有办法让.switch__indicator 覆盖每个label 而不必为.switch 容器设置固定宽度？

我正在使用translate3d，但这需要我设置容器的宽度，并且我想保持动态。

.wrap {
  display: flex;
}

.switch {
  position: relative;
  width: auto;
  padding: 0 1rem;
}

.switch:before {
  content: '  ';
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 3rem;
  border: 2px solid #eee;
  border-radius: 30px;
}

.switch__label {
  display: inline-block;
  width: 2rem;
  border: 3px solid;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: color 200ms ease-out;
}

.switch__indicator {
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: -.5rem;
  left: 0;
  background: green;
  border-radius: 50%;
  transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
  transform: translate3d(1rem, 0, 0);
}

.switch input#one:checked~.switch__indicator {
  transform: translate3d(1.2rem, 0, 0);
}

.switch input#two:checked~.switch__indicator {
  transform: translate3d(5.5rem, 0, 0);
}

.switch input#three:checked~.switch__indicator {
  transform: translate3d(9.6rem, 0, 0);
}

.switch input#four:checked~.switch__indicator {
  transform: translate3d(14rem, 0, 0);
}

.switch input[type="radio"]:not(:checked),
.switch input[type="radio"]:checked {
  display: none;
}

<div class="wrap">
  <div class="switch">
    <input id="one" type="radio" name='thing' value='a' checked="checked" />
    <label for="one" class="switch__label">One</label>

    <input id="two" type="radio" name='thing' value='b' />
    <label for="two" class="switch__label">Two</label>

    <input id="three" type="radio" name='thing' value='c' />
    <label for="three" class="switch__label">Three</label>

    <input id="four" type="radio" name='thing' value='d' />
    <label for="four" class="switch__label">Four</label>

    <div class="switch__indicator"></div>
  </div>
</div>

【问题讨论】：

当你说你希望它“覆盖”每个输入时......你是在寻找四个不同的圆圈，每个圆圈都包含在正方形中，一个扭曲的椭圆形，还是一个完全隐藏正方形的边缘？
我希望圆圈完全像它一样工作，但在选择时让它与每个输入完全对齐。
如果你想保持球的当前动画，我想你可能需要javascript来知道标签的位置。

标签： html css radio-button

【解决方案1】：

计算标签之间的确切空间有点困难，因为label 是内联元素，它们周围有一个空间可以对齐，所以最好在这里使用flexbox 删除空间，然后使用margin 给出它们之间的空间。

现在您需要计算准确的translateX 值，该值将是border 值、标签的width 和它们之间的margin 值之和。

另外，这里不需要translate3d，只需使用translateX 并使用calc() 来计算确切的空间量。

.wrap {
  display: flex;
}

.switch {
  position: relative;
  width: auto;
  padding: 0 1rem;
  display: flex;
}

.switch:before {
  content: '  ';
  position: absolute;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 3rem;
  border: 2px solid #eee;
  border-radius: 30px;
}

.switch__label {
  display: inline-block;
  width: 2rem;
  border: 3px solid;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: color 200ms ease-out;
  margin-right: 4px;
}

.switch__indicator {
  width: 4rem;
  height: 4rem;
  position: absolute;
  bottom: 0;
  left: 0;
  background: green;
  border-radius: 50%;
  transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97), background 300ms cubic-bezier(0.17, 0.67, 0.14, 1.03);
  transform: translate3d(1rem, 0, 0);
}

.switch__label:last-of-type {
  margin-right: 0;
}

.switch input#one:checked~.switch__indicator {
  transform: translateX(calc(1rem + 3px));
}

.switch input#two:checked~.switch__indicator {
  transform: translateX(calc(5rem + 13px));
}

.switch input#three:checked~.switch__indicator {
  transform: translateX(calc(9rem + 23px));
}

.switch input#four:checked~.switch__indicator {
  transform: translateX(calc(13rem + 33px));
}

.switch input[type="radio"]:not(:checked),
.switch input[type="radio"]:checked {
  display: none;
}

<div class="wrap">
  <div class="switch">
    <input id="one" type="radio" name='thing' value='a' checked="checked" />
    <label for="one" class="switch__label">One</label>
    <input id="two" type="radio" name='thing' value='b' />
    <label for="two" class="switch__label">Two</label>
    <input id="three" type="radio" name='thing' value='c' />
    <label for="three" class="switch__label">Three</label>
    <input id="four" type="radio" name='thing' value='d' />
    <label for="four" class="switch__label">Four</label>
    <div class="switch__indicator"></div>
  </div>
</div>

【讨论】：