时间戳

首页 > 解决方案 > 动画完成后有没有办法导航到下一页？

html - 动画完成后有没有办法导航到下一页？

问题描述

我正在尝试为按钮设置动画，当单击绿色按钮时，它会转到左侧 40px，然后返回到原来的位置，当动画完成时，它会导航到下一页。但是当我点击按钮时，它直接导航到下一页，没有任何动画。有人可以帮我怎么做。

  1. 项目清单

.defaultBtn {
  display: flex;
  justify-content: center;
  margin-top: 23px;
  align-items: center;
}

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

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

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

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

.defaultBtn a 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+a label::before {
  animation-name: switchBgColorDefault;
  animation-duration: 0.50s;
  animation-fill-mode: forwards;
  animation-timing-function: steps(1);
}

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

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

@keyframes switchColorDefault {
  0% {
    background-color: #00a651;
    transform: translateX(0);
  }
  50% {
    background-color: #00a651;
    transform: translateX(-70px);
  }
  100% {
    background-color: #00a651;
    transform: translateX(0);
  }
}
<span>Standard Products</span>
<div class="defaultBtn">
  <input type="checkbox" id="defaultBtn">
  <a href="https://www.google.com/search?q=google+translate&oq=goo&aqs=chrome.1.69i57j35i39l2j0l5.4298j0j15&sourceid=chrome&ie=UTF-8" id="standard"><label for="defaultBtn"><span><strong>Access</strong></span></label></a>
</div>

标签： htmlcss

解决方案

$("#standard").click(function(){
  if($('#defaultBtn').prop(":checked",true)){
    window.setTimeout(function(){
      location.reload("https://www.google.com/search?q=google+translate&oq=goo&aqs=chrome.1.69i57j35i39l2j0l5.4298j0j15&sourceid=chrome&ie=UTF-8")},500);
  }
});
.defaultBtn {
    display: flex;
    justify-content: center;
    margin-top: 23px;
    align-items: center;
  

}
.defaultBtn input[type=checkbox] {
    width: 0;
    height: 0;
    display: none;
    visibility: hidden;
}
.defaultBtn a label {
    width: 240px;
    height: 52px;
    display: block;
    cursor: pointer;
    position: relative;
}
.defaultBtn a label span {
    top: 13px;
    z-index: 2;
    right: 57px;
    color: #fff;
     display: block;
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    text-transform: uppercase;
}
.defaultBtn a label::before {
   content: "";
    width: 130px;
    height: 52px;
    margin-left: 12px;
    display: block;
    border-radius: 35px;
    background-color:#122433;
    background-size: 50px 96px;
    background-position: 5px 0px;
    background-repeat: no-repeat;
    background-image: url(https://i.ibb.co/HpMQBCz/checkmark.png);
}
.defaultBtn a 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 + a label::before{
    animation-name: switchBgColorDefault;
    animation-duration: 0.50s;
    animation-fill-mode: forwards;
    animation-timing-function: steps(1);

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

}
@keyframes switchBgColorDefault {
    0% {
      background-position: 5px 0px;
    }
  
    100% {
      background-position: 8px -50px;
      background-color: #007236;
    }
  }
  
  @keyframes switchColorDefault {
    0% {
      background-color: #00a651;
      transform: translateX(0);
    }
    50% {
      background-color: #00a651;
      transform: translateX(-70px);
    }
    100% {
      background-color: #00a651;
      transform: translateX(0);
    }
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Standard Products</span>
                                <div class="defaultBtn">
                                    <input type="checkbox" id="defaultBtn">
                                    <a href="https://www.google.com/search?q=google+translate&oq=goo&aqs=chrome.1.69i57j35i39l2j0l5.4298j0j15&sourceid=chrome&ie=UTF-8" id="standard"><label for="defaultBtn"><span><strong>Access</strong></span></label></a>
                                </div>

推荐阅读