在切换时激活转换时遇到问题

Question

我在切换开关后无法触发动画。现在用我的 JS 它只是显示和隐藏但一旦切换实际上不会触发转换。

我希望转换在切换后触发，然后在再次切换后关闭。

** 我希望蓝色圆圈在切换后从小变大

我有一个 fiddle 代码 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>

Answer 1

您可以更改元素的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>

在切换时激活转换时遇到问题

Trouble with activating transition on toggle

javascript

jquery

css

animation

css-transitions