单选按钮动画，过渡不起作用

Question

.container3 {
  padding: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container3 .materiali {
  padding: 8px 48px;
  margin: 8px;
  font-family: Baskerville;
  font-size: 25px;
}

input[type="radio"] {
  display: none;
}

label {
  position: relative;
}

label::before {
  content: "";
  background: url("check-circle.svg");
  background-position: center;
  background-size: contain;
  width: 32px;
  height: 32px;
  position: absolute;
  left: -45px;
  top: -1px;

  transform: scale(0) rotateZ(180deg);
  transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}

input[type="radio"]:checked + label::before {
  transform: scale(1) rotateZ(0deg);
}

label::after {
  content: "";
  border: 2px solid #27ae60;
  width: 24px;
  height: 24px;
  position: absolute;
  left: -42px;
  top: 1px;
  border-radius: 50%;
}

<div class="container3">
  <h1>LOREM IPSUM</h1>
  <div class="materiali">
    <input name="lpselection" id ="lp-selection-0" value="whatever" type = "radio">
    <label for="lpselection-0">whatever
    </label>
  </div>
  <div class="materiali">
    <input name="lpselection" id ="lp-selection-1" value="idk" type = "radio">
    <label for="idk">idk
    </label>
  </div>
  <div class="materiali">
    <input name="lpselection" id ="lp-selection-2" value="iirc" type = "radio">
    <label for="iirc">IIRC
    </label>
  </div>
  <div class="materiali">
    <input name="lpselection" id ="lp-selection-3" value="lastone" type = "radio">
    <label for="lastone">lastone
    </label>
  </div>
</div>

现在我试图在这些单选按钮上执行转换，就像我在复选框（我以前的 post）中执行这样的转换一样，但是，同样，转换不起作用。代码，我想，没有任何问题，因为我对我的复选框组使用了相同的代码并且它有效，但是恐怕我可能没有正确地订购“输入”和“标签”，即使他们必须就在彼此之下，不是吗？这里出了什么问题？

Answer 1

转换无效。我稍微检查了一下，发现您在 label::before 上放了一张图片，但它没有加载。其次，这不是正确的方法，您应该在输入和样式上使用 ::checked CSS。您在 :before 上放置了一个过渡，但未触发。例如，您可以在 :hover 上使用过渡。

Answer 2

您的罪魁祸首主要是 for 和 id 属性中的语法错误。请参阅下面的示例。

我在示例中使用了 unicode 复选标记，因为没有 svg（顺便说一下，如果您愿意，可以 encode to include directly into the css），任何其他小的更改只是为了示例。干杯。

.container3 {
  padding: center;
  /*height: 100vh;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container3 .materiali {
  padding: 8px 48px;
  margin: 8px;
  font-family: Baskerville;
  font-size: 25px;
}

input[type="radio"] {
  display: none;
}

label {
  position: relative;
  cursor: pointer;
}

label:before {  
  content: "";
  z-index: 1;
  color: red;
  font-size: 2.5rem;
  background: url("check-circle.svg") center / contain no-repeat;
  width: 32px;
  height: 32px;
  position: absolute;
  left: -40px;
  top: -13px;

  transform: scale(0) rotateZ(180deg);
  transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}

input[type="radio"]:checked + label:before {
  transform: scale(1) rotateZ(0deg);
}

label:after {
  content: "";
  border: 2px solid #27ae60;
  width: 24px;
  height: 24px;
  position: absolute;
  left: -42px;
  top: 1px;
  border-radius: 50%;
}

<div class="container3">
  <h1>LOREM IPSUM</h1>
  <div class="materiali">
    <input name="lpselection" id="lp-selection-0" value="whatever" type="radio">
    <label for="lp-selection-0">whatever</label>
  </div>
  <div class="materiali">
    <input name="lpselection" id="lp-selection-1" value="idk" type="radio">
    <label for="lp-selection-1">idk</label>
  </div>
  <div class="materiali">
    <input name="lpselection" id="lp-selection-2" value="iirc" type="radio">
    <label for="lp-selection-2">IIRC</label>
  </div>
  <div class="materiali">
    <input name="lpselection" id="lp-selection-3" value="lastone" type="radio">
    <label for="lp-selection-3">lastone</label>
  </div>
</div>

单选按钮动画，过渡不起作用

Radio button animation , transition not working

html

css

css-transitions

css-transforms

css-animations