Question

我正在尝试为我的网站使用自定义单选按钮。我实现了同样的目标。我试着给单选按钮提供过渡效果，它也有效。我担心的是仅在检查状态下的过渡工作。当我取消选中我的单选按钮时，不会发生转换（即没有发生反向转换）。它只是一种方式。检查下面的代码

<section class="radio">
  <input id="set_empty" type="radio" name="err_rec" value="1">
  <label for="set_empty">Set empty value for the column</label>
   <input id="st_empty" type="radio" name="err_rec" value="1">
  <label for="st_empty">Set empty value for the column</label>
</section>

.radio{
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.radio input[type="radio"], .check input[type="checkbox"] {
    display: none;
}
.radio label, .check label {
    min-height: 1em;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    display: inline-block;
    position: relative;
    outline: none;
}
.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 12px;
    height: 12px;
    left: 0;
    border: 1px solid #46bedc;
    border-radius: 50%;
    background-color: #fff;
    top: 2px;
}
.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 6px;
    height: 6px;
    left: 4px;
    top: 4px;
    border-radius: 50%;
    -webkit-transform: scale(1.6, 1.6);
    -ms-transform: scale(1.6, 1.6);
    -o-transform: scale(1.6, 1.6);
    transform: scale(1.6, 1.6);
    -webkit-transition: transform .5s cubic-bezier(0.6,1,0,0.78);
    -o-transition: transform .5s cubic-bezier(0.6,1,0,0.78);
    transition: transform .5s ease;
    top: 6px;
}
.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    outline: none;
    background-color: rgb(70, 190, 220);
}

Refer here

Answer 1

您还需要转换background-color以使效果可见。没有任何过渡，它立即从颜色变为透明。因此，transform上的转换对于眼睛来说是不可见的。

.radio {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
}
.radio input[type="radio"],
.check input[type="checkbox"] {
  display: none;
}
.radio label,
.check label {
  min-height: 1em;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
  display: inline-block;
  position: relative;
  outline: none;
}
.radio label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 12px;
  height: 12px;
  left: 0;
  border: 1px solid #46bedc;
  border-radius: 50%;
  background-color: #fff;
  top: 2px;
}
.radio label::after {
  display: inline-block;
  position: absolute;
  content: " ";
  width: 6px;
  height: 6px;
  left: 4px;
  top: 4px;
  border-radius: 50%;
  transform: scale(1.6, 1.6);
  transition: transform .5s ease, background-color .5s ease;
  top: 6px;
}
.radio input[type="radio"]:checked + label::after {
  transform: scale(1, 1);
  outline: none;
  background-color: rgb(70, 190, 220);
}

<section class="radio">
  <input id="set_empty" type="radio" name="err_rec" value="1">
  <label for="set_empty">Set empty value for the column</label>
  <input id="st_empty" type="radio" name="err_rec" value="1">
  <label for="st_empty">Set empty value for the column</label>
</section>

在使用CSS3创建的自定义单选按钮上，在反向模式下不会发生转换

1 个答案: