javascript - 从新标签返回后如何完成动画效果？

Question

function navigation(id) {
  switch (id) {
    case 'btn4':
      setTimeout(() => {
        window.open("https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8", 'Dictionary')
      }, 250);
      break;

    case 'btn5':
      setTimeout(() => {
        window.open("https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8", 'Dictionary')
      }, 250);
      break;
  }
}

.defaultBtn {
  margin-top: 23px
}

.defaultBtn input[type=checkbox] {
  width: 0;
  height: 0;
  display: none;
  visibility: hidden;
}

.defaultBtn label {
  width: 240px;
  height: 52px;
  display: block;
  cursor: pointer;
  position: relative;
}

.defaultBtn label span {
  top: 13px;
  z-index: 2;
  right: 57px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  text-transform: uppercase;
}

.defaultBtn label::before {
  content: "";
  width: 130px;
  height: 52px;
  margin-left: 12px;
  display: block;
  border-radius: 35px;
  background-color: #122433;
  background-size: 50px 110px;
  background-position: 5px 0px;
  background-repeat: no-repeat;
  background-image: url(https://i.ibb.co/HpMQBCz/checkmark.png);
}

.defaultBtn label::after {
  content: '';
  top: 0;
  right: 18px;
  width: 157px;
  height: 52px;
  position: absolute;
  border: 0.2rem solid #64ef65;
  border-radius: 35px;
  background: linear-gradient(to bottom, #53D853 0%, #0F860F 100%);
}

input[type="checkbox"]:checked+label::before {
  animation-name: switchBgColorDefault;
  animation-fill-mode: forwards;
  animation-duration: 0.25s;
  animation-timing-function: steps(1);
}

input[type="checkbox"]:checked+label::after,
input:checked+label span {
  animation-name: switchColorDefault;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

@keyframes switchBgColorDefault {
  0% {
    background-position: 5px 0px;
  }
  100% {
    background-position: 8px -55px;
    background-color: #007236;
  }
}

@keyframes switchColorDefault {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-70px);
  }
  100% {
    transform: translateX(0);
  }
}

<div class="defaultBtn" id="btn1" onclick="navigation(this.id);">
  <input type="checkbox" id="defaultBtn">
  <label for="defaultBtn"><span><strong>Access</strong></span>
                                     </label>
</div>

我有一些动画按钮，当我单击此按钮时，它会动画并在新选项卡中打开网站。但是当我从新标签返回主页按钮时，它仍处于动画状态。我希望从新标签返回后删除动画。有人可以帮我解决这个问题吗？我有一些动画按钮，当我单击此按钮时，它会动画并在新选项卡中打开网站。但是当我从新标签返回主页按钮时，它仍处于动画状态。我希望从新标签返回后删除动画。有人可以帮我解决这个问题吗？

Answer 1

使用简单的技巧:使用 <a>标签onclick="setTimeout('animRedirect()', 250);"放弃checkbox 点击
我在复选框之前添加一个标签并添加 url

<a href="https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8" id="reDirect" target="_blank">
    ------------------Add here check box---------------------------
</a>

我在 codepen 中解决了这个问题:https://codepen.io/Rayeesac/pen/ExKKPZe

function animRedirect(){
  document.getElementById("reDirect").click();
}

.defaultBtn {
    margin-top: 23px
}
.defaultBtn input[type=checkbox] {
    width: 0;
    height: 0;
    display: none;
    visibility: hidden;
}
.defaultBtn  label {
    width: 240px;
    height: 52px;
    display: block;
    cursor: pointer;
    position: relative;
}
.defaultBtn  label span {
    top: 13px;
    z-index: 2;
    right: 57px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    text-transform: uppercase;
}
.defaultBtn  label::before {
   content: "";
    width: 130px;
    height: 52px;
    margin-left: 12px;
    display: block;
    border-radius: 35px;
    background-color:#122433;
    background-size: 50px 110px;
    background-position: 5px 0px;
    background-repeat: no-repeat;
    background-image: url(https://i.ibb.co/HpMQBCz/checkmark.png);
}
.defaultBtn  label::after {
    content: '';
    top: 0;
    right: 18px;
    width: 157px;
    height: 52px;
    position: absolute;
    border:0.2rem solid #64ef65;
    border-radius: 35px;
    background:linear-gradient(to bottom,#53D853 0%,#0F860F 100%);
}
input[type="checkbox"]:checked +  label::before{
    animation-name: switchBgColorDefault;
    animation-fill-mode: forwards;
    animation-duration: 0.25s;
    animation-timing-function: steps(1);

}
input[type="checkbox"]:checked +  label::after,
input:checked + label span{
    animation-name: switchColorDefault;
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;

}
#reDirect{
    outline: none;
    width: 100%;
}

@keyframes switchBgColorDefault {
    0% {
      background-position: 5px 0px;
    }
  
    100% {
      background-position: 8px -55px;
      background-color: #007236;
    }
}
  
@keyframes switchColorDefault {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-70px);

    }
    100% {
      transform: translateX(0);
    }
}

<div class="defaultBtn" id="btn1">
    <a href="https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8" id="reDirect" target="_blank">
        <input type="checkbox" id="defaultBtn" onclick="setTimeout('animRedirect()', 250)">
        <label for="defaultBtn">
            <span><strong>Access</strong></span>
        </label>
    </a>
</div>