动画制作完成后，有没有办法导航到下一页

Question

我正在尝试设置按钮的动画，当单击绿色按钮时，它会移动到左侧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>

Answer 1

您不需要将href保存在标记中，而是需要用javascript处理它。您需要在javascript中放置一个单击处理程序，然后才能实现此操作。

在HTML 中

<div class="defaultBtn" onclick="navigate()">
<input type="checkbox" id="defaultBtn">
<a href=""><label for="defaultBtn"><span><strong>Access</strong></span> 
</label></a>
</div>

在javascript 中

function navigate(){
setTimeout((function(){
window.open('https://www.google.com/search?q=google+translate&oq=goo&aqs=chrome.1.69i57j35i39l2j0l5.4298j0j15&sourceid=chrome&ie=UTF-8" id="standard');
},2000);
}

你可以更改时间。现在我保持了2秒。

Answer 2

$("#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>