html - 每次加载页面时单选按钮波纹效果隐藏

Question

我在我的代码中为单选按钮添加了涟漪效果，在选择单选按钮时效果很好，但我试图避免在页面/模态负载上显示涟漪效果。是否可以在页面加载时隐藏该波纹？对于复选框，它工作正常，但对于单选按钮，它不起作用 - 并显示页面加载时的涟漪 - 任何人都可以提供解决方案吗？

.checkbox {
  position: relative;
  /* display: block;
  padding-top: 20px;
  padding-bottom: 20px; */
}

.form-check-inline .form-check-input {
  width: 18px;
  height: 18px;
}

.checkbox input {
  position: absolute;
  top: 50%;
  margin: 0;
  transform: translateY(0%);
  cursor: pointer;
}

.checkbox label {
  position: relative;
  /* padding-left: 20px;
  padding-right: 20px; */
}


/* ripple
 */

.checkbox label:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  margin-left: -37px;
  margin-top: -16px;
  background: #3f51b5;
  border-radius: 100%;
  opacity: .6;
  transform: scale(0);
}

@keyframes ripple {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes rippleDuplicate {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.checkbox input+label:after {
  animation: ripple .4s ease-out;
}


/* to re-trigger the animation with just CSS, we need to duplicate the keyframes
 */

.checkbox input:checked+label:after {
  animation-name: rippleDuplicate;
}


/* fixes initial animation run, without user input, on page load.
 */

.checkbox label:after {
  visibility: hidden;
}

.checkbox input:focus+label:after {
  visibility: visible;
}


/*-------------radio ------------*/

@-moz-keyframes ripple {
  5%,
  100% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
}

@-webkit-keyframes ripple {
  5%,
  100% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
}

@keyframes ripple {
  5%,
  100% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input[type="radio"]+label {
  position: relative;
  cursor: pointer;
  padding-left: 28px;
}

input[type="radio"]+label:before,
input[type="radio"]+label:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

input[type="radio"]+label:before {
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: #1565C0;
  border: 1px solid #888;
  -moz-box-shadow: inset 0 0 0 18px #fff;
  -webkit-box-shadow: inset 0 0 0 18px #fff;
  box-shadow: inset 0 0 0 18px #fff;
}

input[type="radio"]+label:after {
  top: 49%;
  left: 9px;
  width: 42px;
  height: 42px;
  opacity: 0;
  background: #3f51b552;
  -moz-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-image: none;
}

input[type="radio"]:checked+label:before {
  -moz-box-shadow: inset 0 0 0 4px #E0E0E0;
  -webkit-box-shadow: inset 0 0 0 4px #E0E0E0;
  box-shadow: inset 0 0 0 4px #E0E0E0;
}

input[type="radio"]:checked+label:after {
  -moz-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  -moz-animation: ripple 1s none;
  -webkit-animation: ripple 1s none;
  animation: ripple 1s none;
}

.custom-control-inline {
  margin-right: 0;
}

<div _ngcontent-c8="" class="form-check form-check-inline checkbox checkbox-warning checkbox-inline pl-0 text-left">
  <input _ngcontent-c8="" class="form-check-input" id="check1" name="enquiry" type="checkbox">
  <label _ngcontent-c8="" class="form-check-label label-font" for="inlineCheckbox1">Closed Enquiries</label>
</div>
<br>
<div _ngcontent-c4="" class="col-md-3 text-right po-list-radio">
  <div _ngcontent-c4="" class="custom-control custom-radio custom-control-inline">
    <input _ngcontent-c4="" checked="checked" class="custom-control-input" id="valid" name="inlineRadio" type="radio">
    <label _ngcontent-c4="" class="custom-control-label label-font mt-1" for="valid">Valid</label>
  </div>
  <div _ngcontent-c4="" class="custom-control custom-radio custom-control-inline">
    <input _ngcontent-c4="" class="custom-control-input" id="expired" name="inlineRadio" type="radio">
    <label _ngcontent-c4="" class="custom-control-label label-font mt-1" for="expired">Expired</label>
  </div>
  <div _ngcontent-c4="" class="custom-control custom-radio custom-control-inline">
    <input _ngcontent-c4="" class="custom-control-input" id="all" name="inlineRadio" type="radio">
    <label _ngcontent-c4="" class="custom-control-label label-font mt-1" for="all">All</label>
  </div>
</div>

重申一下：对于复选框，它正在工作，但对于单选按钮不起作用；每次最初加载页面时，都会发生涟漪，我只想在用户单击单选按钮后才看到它，而不是在页面加载时看到它。

标签： htmlcss

Answer 1

当您的涟漪效应在以下位置完成时：

input[type="radio"]+label:after {
  background: #3f51b552;
  ...

您可以将该背景颜色设置为空 CSS 变量，以便加载它不会显示：

input[type="radio"]+label:after {
  background: var(--c, );
  ...

然后单击将变量设置回使用javascript的颜色：

document.querySelectorAll('input[type="radio"]').forEach(radio => {
  radio.addEventListener('change', function(e) {
   this.nextElementSibling.style.setProperty("--c", "#3f51b552")
  })
});

.checkbox {
  position: relative;
  /* display: block;
  padding-top: 20px;
  padding-bottom: 20px; */
}

.form-check-inline .form-check-input {
  width: 18px;
  height: 18px;
}

.checkbox input {
  position: absolute;
  top: 50%;
  margin: 0;
  transform: translateY(0%);
  cursor: pointer;
}

.checkbox label {
  position: relative;
  /* padding-left: 20px;
  padding-right: 20px; */
}


/* ripple
 */

.checkbox label:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  margin-left: -37px;
  margin-top: -16px;
  background: #3f51b5;
  border-radius: 100%;
  opacity: .6;
  transform: scale(0);
}

@keyframes ripple {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes rippleDuplicate {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.checkbox input+label:after {
  animation: ripple .4s ease-out;
}


/* to re-trigger the animation with just CSS, we need to duplicate the keyframes
 */

.checkbox input:checked+label:after {
  animation-name: rippleDuplicate;
}


/* fixes initial animation run, without user input, on page load.
 */

.checkbox label:after {
  visibility: hidden;
}

.checkbox input:focus+label:after {
  visibility: visible;
}


/*-------------radio ------------*/

@-moz-keyframes ripple {
  5%,
  100% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
}

@-webkit-keyframes ripple {
  5%,
  100% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
}

@keyframes ripple {
  5%,
  100% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input[type="radio"]+label {
  position: relative;
  cursor: pointer;
  padding-left: 28px;
}

input[type="radio"]+label:before,
input[type="radio"]+label:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

input[type="radio"]+label:before {
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: #1565C0;
  border: 1px solid #888;
  -moz-box-shadow: inset 0 0 0 18px #fff;
  -webkit-box-shadow: inset 0 0 0 18px #fff;
  box-shadow: inset 0 0 0 18px #fff;
}

input[type="radio"]+label:after {
  background: var(--c, );
  top: 49%;
  left: 9px;
  width: 42px;
  height: 42px;
  opacity: 0;
  -moz-transform: translate(-50%, -50%) scale(0);
  -ms-transform: translate(-50%, -50%) scale(0);
  -webkit-transform: translate(-50%, -50%) scale(0);
  transform: translate(-50%, -50%) scale(0);
}

.custom-radio .custom-control-input:checked~.custom-control-label::after {
  background-image: none;
}

input[type="radio"]:checked+label:before {
  -moz-box-shadow: inset 0 0 0 4px #E0E0E0;
  -webkit-box-shadow: inset 0 0 0 4px #E0E0E0;
  box-shadow: inset 0 0 0 4px #E0E0E0;
}

input[type="radio"]:checked+label:after {
  -moz-transform: translate(-50%, -50%) scale(1);
  -ms-transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  -moz-animation: ripple 1s none;
  -webkit-animation: ripple 1s none;
  animation: ripple 1s none;
}

.custom-control-inline {
  margin-right: 0;
}

<div _ngcontent-c8="" class="form-check form-check-inline checkbox checkbox-warning checkbox-inline pl-0 text-left">
  <input _ngcontent-c8="" class="form-check-input" id="check1" name="enquiry" type="checkbox">
  <label _ngcontent-c8="" class="form-check-label label-font" for="inlineCheckbox1">Closed Enquiries</label>
</div>
<br>
<div _ngcontent-c4="" class="col-md-3 text-right po-list-radio">
  <div _ngcontent-c4="" class="custom-control custom-radio custom-control-inline">
    <input _ngcontent-c4="" checked="checked" class="custom-control-input" id="valid" name="inlineRadio" type="radio">
    <label _ngcontent-c4="" class="custom-control-label label-font mt-1" for="valid">Valid</label>
  </div>
  <div _ngcontent-c4="" class="custom-control custom-radio custom-control-inline">
    <input _ngcontent-c4="" class="custom-control-input" id="expired" name="inlineRadio" type="radio">
    <label _ngcontent-c4="" class="custom-control-label label-font mt-1" for="expired">Expired</label>
  </div>
  <div _ngcontent-c4="" class="custom-control custom-radio custom-control-inline">
    <input _ngcontent-c4="" class="custom-control-input" id="all" name="inlineRadio" type="radio">
    <label _ngcontent-c4="" class="custom-control-label label-font mt-1" for="all">All</label>
  </div>
</div>