单选按钮波纹效果最初在页面加载时出现

问题描述

我在代码上的单选按钮中添加了波纹效果。单击单选按钮可以正常工作，但是波纹效果最初是在页面加载时出现的，我从下面的示例中引用了

https://codepen.io/lorenzodianni/pen/ByXMYB/，请问有任何人可以帮助我，谢谢！

 <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>

@-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: 20px;
}
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;
  -moz-box-shadow: inset 0 0 0 18px #E0E0E0;
  -webkit-box-shadow: inset 0 0 0 18px #E0E0E0;
  box-shadow: inset 0 0 0 18px #E0E0E0;
}
input[type="radio"] + label:after {
  top: 49%;
  left: 9px;
  width: 42px;
  height: 42px;
  opacity: 0;
  background: #3f51b5;
  -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;
}
/* fixes initial animation run,without user input,on page load.
*/
 .custom-radio label:after {
  visibility: hidden;
 }

 .custom-radio input:focus + label:after {
  visibility: visible;
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）