我需要知道为什么我的 Transition 效果不适用于 input:checked::before

问题描述

我想在什么时候给输入的before元素赋予过渡效果 检查但它不工作。

我需要知道为什么这不起作用。 否则我必须尝试新的东西

input[type="checkBox"]{
  width: 160px;
  height: 50px;
  appearance: none;
  outline: none;
  position: absolute;
  align-items: center;
  display: flex;
  margin: 13px;
}

input[type="checkBox"]:checked::before{
  position: absolute;
  right: 0;
  transition: 0.5s linear;
}

input[type="checkBox"]::before{
  content: '';
  width: 75px;
  height: 44px;
  right: 100;
  position: absolute;
  margin: 1px;
  transition: 0.5s ;    
}

div{
  width: 200px;
  height: 70px;
  position: absolute;
  align-items: center;
  display: flex;
  margin: 20px;
}

<input type="checkBox">

解决方法

这里有几件事：

您的正确值需要“px”并将 transition: 0.5s linear; 移至您的 input[type="checkbox"]::before。

input[type="checkbox"] {
  background: lightblue;
  width: 160px;
  height: 50px;
  appearance: none;
  outline: none;
  position: absolute;
  align-items: center;
  display: flex;
  margin: 13px;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  background: lightcoral;
  width: 75px;
  height: 44px;
  /* calculate right 100% minus width of :before to get correct position */
  right: calc(100% - 75px);;
  transition: 0.5s linear;
}

input[type="checkbox"]:checked::before {
  position: absolute;
  right: 0;
}

div {
  width: 200px;
  height: 70px;
  position: absolute;
  align-items: center;
  display: flex;
  margin: 20px;
}

<input type="checkbox">