CSS 我可以过渡到 flex-end 吗？

Question

我正在尝试将转换属性添加到复选框开关。它的起始位置是 flex-start，我希望它顺利过渡到 flex-end。我只是似乎无法让它在 flex-end 属性上工作，但奇怪的是，开关移动到 flex-end 并且背景颜色转换正确。

我看过以前类似问题的答案，但我就是无法破解这个问题！

有人可以告诉我我在这里缺少什么吗？

提前致谢。

/* the container controls the switch size */
.switch-container {
  width: 100%;
  height: 34px;
  background-color: coral;
}

/* hide the default checkbox */
.checkbox {
  position: absolute;
  left: -9999px;
}

/* target the label i.e. box around the slider */
.switch {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

/* target the span element */
.slider {
  display: flex;
  position: absolute;
  cursor: pointer;
  /* set size of slider track */
  top: 10px;
  left: 0;
  right: 0;
  bottom: 10px;
  /* === end set size === */
  background-color: #ccc;
  align-items: center;
  justify-content: flex-start;
  transition: var(--transition);
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  background-color: rgb(199, 36, 36);
  box-shadow: 2px 2px cadetblue inset, -2px -2px cadetblue inset;
  transition: var(--transition);
}

input:checked + .slider:before {
  transform: translateX(129%);
  background-color: darkgreen;
  transition: var(--transition);
}

input:checked + .slider {
  background-color: #2196f3;
  transition: var(--transition);
}

<section class="switch-container">
      <label class="switch">
        <input type="checkbox" class="checkbox"/>
        <span class="slider"></span>
      </label>
    </section>
</html>

我遇到的问题是，如果我让开关大小响应父容器的大小，那么使用transform: translateX(some-value) 移动切换滑块，(some-value) 必须重新计算以适应当前轨道大小.

Answer 1

您不能为这些值设置动画。我建议，你改为动画 margin-left

.switch {
  --slider-width: 26px;
  --switch-width: calc(100% - var(--slider-width) / 2);
  /* --- */
  width: var(--switch-width);
  /* --- */
}
/* --- */
.slider:before {
  /* --- */
  width: var(--slider-width);
  /* --- */
}
/* --- */
input:checked + .slider {
  margin-left: calc(var(--switch-width) - var(--slider-width) / 2);
}

.checkbox {
  position: absolute;
  left: -9999px;
}

/* target the label i.e. box around the slider */
.switch {
  --slider-width: 26px;
  --switch-width: calc(100% - var(--slider-width) / 2);
  position: relative;
  display: flex;
  width: var(--switch-width);
  height: 34px;
}

/* target the span element */
.slider {
  display: flex;
  position: absolute;
  cursor: pointer;
  /* set size of slider track */
  top: 10px;
  left: 0;
  right: 0;
  bottom: 10px;
  /* === end set size === */
  background-color: #ccc;
  align-items: center;
  justify-content: flex-start;
  transition: 0.5s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: var(--slider-width);
  background-color: rgb(199, 36, 36);
  box-shadow: 2px 2px cadetblue inset, -2px -2px cadetblue inset;
  transition: 0.5s;
}

input:checked + .slider:before {
  /* transform: translateX(125%); */ /* note this transitions correctly */
  background-color: darkgreen;
  /* transition: var(--transition); */
  transition: 0.5s;
}

input:checked + .slider {
  background-color: #2196f3;
  margin-left: calc(var(--switch-width) - var(--slider-width) / 2);
  transition: 0.5s;
}

<label class="switch">
  <input type="checkbox" class="checkbox"/>
  <span class="slider"></span>
</label>

Answer 2

这是我的尝试。

/* the container controls the switch size */
.switch-container {
  width: 100%;
  height: 34px;
  background-color: coral;
  --transition: 300ms
}

/* hide the default checkbox */
.checkbox {
  position: absolute;
  left: -9999px;
}

/* target the label i.e. box around the slider */
.switch {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

/* target the span element */
.slider {
  display: flex;
  position: absolute;
  cursor: pointer;
  /* set size of slider track */
  top: 10px;
  left: 0;
  right: 0;
  bottom: 10px;
  /* === end set size === */
  background-color: #ccc;
  align-items: center;
  transition: var(--transition);
}

.slider:before {
  content: "";
  flex: 0;
  transition: var(--transition);
}

input:checked + .slider:before {
  flex: 1 1 0%
}

.slider:after {
  content: "";
  height: 26px;
  width: 26px;
  background-color: rgb(199, 36, 36);
  box-shadow: 2px 2px cadetblue inset, -2px -2px cadetblue inset;
  transition: var(--transition);
}

input:checked + .slider:after {
  background-color: darkgreen;
  transition: var(--transition);
}

input:checked + .slider {
  background-color: #2196f3;
  transition: var(--transition);
}

<section class="switch-container">
  <label class="switch">
    <input type="checkbox" class="checkbox"/>
    <span class="slider"></span>
  </label>
</section>