javascript - 在切换时激活转换有问题
问题描述
切换切换后,我的动画触发出现问题。现在使用我的 JS,它只是显示和隐藏,但一旦切换就不会真正触发转换。
我希望转换在切换后触发,然后在再次切换后关闭。
** 一旦切换,我希望蓝色圆圈从小到大
我有一个代码https://jsfiddle.net/pb3fncgq/1/
$("#customSwitch1").on('change', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
document.getElementById("bubble").style.display='block';
}
else {
$(this).attr('value', 'false');
document.getElementById("bubble").style.display='none';
}
});
.HowItWorks-togglerTextLabel {
color: #00b5d0;
display: inline-block;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
}
.HowItWorks-togglerCheckbox {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none;
height: 100%;
left: 0;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;
}
.HowItWorks-togglerLabel:before {
background-color: #fff;
border-radius: 1.125rem;
bottom: 0;
content: "";
display: block;
height: 1.125rem;
margin: 0;
position: absolute;
right: .1875rem;
top: .1875rem;
-webkit-transition: all .4s ease-in;
-o-transition: all .4s ease-in;
transition: all .4s ease-in;
width: 1.125rem;
}
.HowItWorks-togglerDisplay span {
cursor: pointer;
font-size: 80%;
font-weight: 500;
text-transform: uppercase;
-webkit-transition: color .4s ease-in;
-o-transition: color .4s ease-in;
transition: color .4s ease-in;
vertical-align: middle;
}
.HowItWorks-diagram {
margin-top: .75rem;
position: relative;
}
.img-fluid, .img-thumbnail,img {
max-width: 100%;
height: auto;
}
.custom-switch .form-check-input {
width: 2em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
margin-left: -2.5em;
background-position: left center;
border-radius: 2em;
transition: background-position .15s ease-in-out;
}
.form-check-input {
background-color: green;
border-color: green;
}
.HowItWorks-togglerTextLabel {
color: #00b5d0;
display: inline-block;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
}
.HowItWorks-togglerDisplay span:first-of-type {
color: #bdbdbd;
}
.radius-of-distraction {
background-color: rgba(16,112,142,.4);
border-radius: 50%;
left: 46%;
padding-bottom: 40%;
position: absolute;
top: 51%;
-webkit-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-transition-duration: .4s;
-o-transition-duration: .4s;
transition-duration: .3s;
- webkit-transition-property: padding-bottom,width;
-o-transition-property: padding-bottom,width;
transition-property: padding-bottom,width;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
width: 40%;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</head>
<div class="container">
<div class="row">
<label class="HowItWorks-togglerDisplay" for="HowItWorks-toggler">
<input class="HowItWorks-togglerCheckbox" id="HowItWorks-toggler" type="checkbox" checked="">
<br>
<div class="form-check form-switch">
<div class="form-check custom-control custom-switch">
<input type="checkbox" class="custom-control-input form-check-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
</div>
<div class="HowItWorks-diagram">
<img class="img-fluid" src="https://i.imgur.com/nvlr2TB.png" alt="Radius of Distraction">
<div id="bubble" class="radius-of-distraction"></div>
</div>
<hr class="text-muted">
</label>
</div>
</div>
解决方案
您可以更改opacity
元素的:
$("#customSwitch1").on('change', function() {
if ($(this).is(':checked')) {
$(this).attr('value', 'true');
document.getElementById("bubble").style.opacity = '1';
} else {
$(this).attr('value', 'false');
document.getElementById("bubble").style.opacity = '0';
}
});
.HowItWorks-togglerTextLabel {
color: #00b5d0;
display: inline-block;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
}
.HowItWorks-togglerCheckbox {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: none;
height: 100%;
left: 0;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 100%;
}
.HowItWorks-togglerLabel:before {
background-color: #fff;
border-radius: 1.125rem;
bottom: 0;
content: "";
display: block;
height: 1.125rem;
margin: 0;
position: absolute;
right: .1875rem;
top: .1875rem;
-webkit-transition: all .4s ease-in;
-o-transition: all .4s ease-in;
transition: all .4s ease-in;
width: 1.125rem;
}
.HowItWorks-togglerDisplay span {
cursor: pointer;
font-size: 80%;
font-weight: 500;
text-transform: uppercase;
-webkit-transition: color .4s ease-in;
-o-transition: color .4s ease-in;
transition: color .4s ease-in;
vertical-align: middle;
}
.HowItWorks-diagram {
margin-top: .75rem;
position: relative;
}
.img-fluid,
.img-thumbnail,
img {
max-width: 100%;
height: auto;
}
.custom-switch .form-check-input {
width: 2em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
margin-left: -2.5em;
background-position: left center;
border-radius: 2em;
transition: background-position .15s ease-in-out;
}
.form-check-input {
background-color: green;
border-color: green;
}
.HowItWorks-togglerTextLabel {
color: #00b5d0;
display: inline-block;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
}
.HowItWorks-togglerDisplay span:first-of-type {
color: #bdbdbd;
}
.radius-of-distraction {
background-color: rgba(16, 112, 142, .4);
border-radius: 50%;
left: 46%;
padding-bottom: 40%;
position: absolute;
top: 51%;
opacity:0;
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition-duration: .4s;
-o-transition-duration: .4s;
transition-duration: .3s;
- webkit-transition-property: padding-bottom, width, opacity;
-o-transition-property: padding-bottom, width, opacity;
transition-property: padding-bottom, width, opacity;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
width: 40%;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</head>
<div class="container">
<div class="row">
<label class="HowItWorks-togglerDisplay" for="HowItWorks-toggler">
<input class="HowItWorks-togglerCheckbox" id="HowItWorks-toggler" type="checkbox" checked="">
<br>
<div class="form-check form-switch">
<div class="form-check custom-control custom-switch">
<input type="checkbox" class="custom-control-input form-check-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
</div>
<div class="HowItWorks-diagram">
<img class="img-fluid" src="https://i.imgur.com/nvlr2TB.png" alt="Radius of Distraction">
<div id="bubble" class="radius-of-distraction"></div>
</div>
<hr class="text-muted">
</label>
</div>
</div>
推荐阅读
- microsoft-cognitive - 获取分析表单结果 API 返回错误代码 3003
- javascript - 找不到模块 React 要求
- javascript - 无法使用动态创建的按钮复制文本
- node.js - 为什么我会收到“网站或应用程序上的数据泄露泄露了您的密码。Chrome 建议立即更改您在“SITENAME”上的密码。”
- html - 让一个元素具有优先流,这样它就不会环绕其他元素?
- python - Datetime fails when setting astype, date mangled
- ide - 横幅样式的 Clang 格式
- git - 多个 git 帐户:不使用 .ssh/config 或 SSH 代理
- python - 玛雅人。有没有办法通过改变视口来激活脚本作业?
- batch-file - 在 if 语句中使变量动态化