我有一张简单的双面卡"前面有一个按钮(标有“#34;下一个"”),后面有另一个按钮(标有"后面")。每个按钮触发jquery旋转"卡"垂直方向,使用转换持续时间:2s,这样可以看到卡正在被翻转"而不是仅仅是瞬间翻转。我的问题是,在我按下每个按钮一次后,我无法获得" transition-duration / animation-duration"再次触发。我可以尝试将它放在我的Jquery函数中,但是我不明白为什么我的CSS动画持续时间没有在每次按钮点击时触发(它只适用于每个按钮1次点击,"卡"相应地翻转到一旦我按下按钮一次,然后再返回到前面)。我从表单中删除了大部分信息,因此告诉我要求的内容要容易一些。任何帮助将不胜感激。
$(document).ready(function() {
$("input[name='next']").on("click", function() {
console.log("The NEXT Button Worked!");
$(".form").css("transform", "rotateY(180deg)");
})
$("input[name='back']").on("click", function() {
console.log("The BACK Button Worked!");
$(".formFlipAgain").css("transform", "rotateY(180deg)");
})
});
function showBack() {
setTimeout(function() {
document.getElementById("backSide").style.display = "block";
}, 600);
setTimeout(function() {
document.getElementById("frontSide").style.display = "none";
}, 600);
};
function showFront() {
setTimeout(function() {
document.getElementById("frontSide").style.display = "block";
}, 600);
setTimeout(function() {
document.getElementById("backSide").style.display = "none";
}, 600);
};

.form {
transform-style: preserve-3d;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
.formFlipAgain {
transform-style: preserve-3d;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: space-between;
}
.formTitle {
border-bottom: solid red;
}
.form-style-5 {
position: relative;
top: 0px;
max-width: 60%;
max-height: 82vh;
padding: 10px 20px;
background: #f4f7f8;
margin: 10px auto;
border-radius: 8px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
#form-style-5-Animation {
animation: slide 3s 1;
}
@keyframes slide {
0% {
transform: translate3d(0px, 1000%, 0px);
}
100% {
transform: translate3d(0px, 0%, 0px);
}
}
.form-style-5:after {
opacity: 1;
}
.form-style-5 fieldset {
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 10px;
}
.form-style-5 label {
font-size: 1.3em;
display: block;
margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="location"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding-left: 2%;
height: 6%;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 3%;
}
.form-style-5 textarea {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding-left: 2%;
height: 12%;
/*Changing height for task textarea*/
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 3%;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="location"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
background: #d2d9dd;
}
.form-style-5 select {
-webkit-appearance: menulist-button;
height: 35px;
}
.form-style-5 .number {
background: red;
color: #FCFBE3;
height: 25px;
width: 25px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 25px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
border-radius: 0px 15px 15px 15px;
margin-bottom: 3%;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
position: relative;
display: block;
padding: 10px 39px 10px 39px;
color: #FCFBE3;
margin: 0 auto;
background: red;
font-size: 22px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid red;
border-width: 1px 1px 3px;
margin-bottom: 10px;
box-shadow: 0 5px 0 #b30000;
border-radius: 4px;
}
.form-style-5 input[type="backButton"] {
position: relative;
display: block;
padding: 10px 39px 10px 39px;
color: #FCFBE3;
margin: 0 auto;
background: red;
font-size: 22px;
text-align: center;
font-style: normal;
width: 140px;
border: 1px solid red;
border-width: 1px 1px 3px;
margin-bottom: 10px;
box-shadow: 0 5px 0 #b30000;
border-radius: 4px;
}
.form-style-5 input[type="submit"]:active,
.form-style-5 input[type="button"]:active {
transform: translateY(3px);
box-shadow: 0 2px 0 #b30000;
}
.form-style-5 input[type="submit"]:focus,
.form-style-5 input[type="button"]:focus {
outline: 0;
}
.next {
-webkit-transition-duration: .01s;
-moz-transition-duration: .01s;
-o-transition-duration: .01s;
transition-duration: .01s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
#backSide {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
#backButton {
background: red;
color: white;
box-shadow: 0 2px 0 #b30000;
border-radius: 4px;
border-color: red;
position: absolute;
float: left;
left: 15px;
top: 3px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
width: 90px;
height: 27px;
font-size: 105%;
outline: 0;
}
#name,
#contact,
#location,
#misc,
#job {
height: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="formFlipAgain">
<div class="form" style="background-color:black">
<div class="form-style-5" id="form-style-5-Animation">
<div id="frontSide">
<form action="send-sms.php" method="POST">
<input type="text" name="field1" id="name" placeholder="Your Name *">
<input name="next" type="button" value="Next ⇾" class="next" onClick="showBack();" />
</div>
<div id="backSide" style="display: none;">
<input name="back" class="Button" type="button" onClick="showFront();" value="⇽ back" id="backButton" />
</div>
</div>
</form>
</div>
</div>
&#13;
答案 0 :(得分:2)
我认为这是你想要实现的结果,你不需要 额外课程&#39; .formFlipAgain&#39;你可以用课程&#39;。形式&#39;旋转div。 180度,它仍然在那种情况下,这导致瞬间翻转, 你只需要将其旋转回来。
$(document).ready(function() {
$("input[name='next']").on("click", function() {
console.log("The NEXT Button Worked!");
$(".form").css("transform", "rotateY(180deg)");
})
$("input[name='back']").on("click", function() {
console.log("The BACK Button Worked!");
$(".form").css("transform", "rotateY(0deg)");
})
});
function showBack() {
setTimeout(function() {
document.getElementById("backSide").style.display = "block";
}, 600);
setTimeout(function() {
document.getElementById("frontSide").style.display = "none";
}, 600);
};
function showFront() {
setTimeout(function() {
document.getElementById("frontSide").style.display = "block";
}, 600);
setTimeout(function() {
document.getElementById("backSide").style.display = "none";
}, 600);
};
&#13;
.form {
transform-style: preserve-3d;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
.formFlipAgain {
transform-style: preserve-3d;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
#flex {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: space-between;
}
.formTitle {
border-bottom: solid red;
}
.form-style-5 {
position: relative;
top: 0px;
max-width: 60%;
max-height: 82vh;
padding: 10px 20px;
background: #f4f7f8;
margin: 10px auto;
border-radius: 8px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
#form-style-5-Animation {
animation: slide 3s 1;
}
@keyframes slide {
0% {
transform: translate3d(0px, 1000%, 0px);
}
100% {
transform: translate3d(0px, 0%, 0px);
}
}
.form-style-5:after {
opacity: 1;
}
.form-style-5 fieldset {
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 10px;
}
.form-style-5 label {
font-size: 1.3em;
display: block;
margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="location"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding-left: 2%;
height: 6%;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 3%;
}
.form-style-5 textarea {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding-left: 2%;
height: 12%;
/*Changing height for task textarea*/
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 3%;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="location"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
background: #d2d9dd;
}
.form-style-5 select {
-webkit-appearance: menulist-button;
height: 35px;
}
.form-style-5 .number {
background: red;
color: #FCFBE3;
height: 25px;
width: 25px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 25px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
border-radius: 0px 15px 15px 15px;
margin-bottom: 3%;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
position: relative;
display: block;
padding: 10px 39px 10px 39px;
color: #FCFBE3;
margin: 0 auto;
background: red;
font-size: 22px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid red;
border-width: 1px 1px 3px;
margin-bottom: 10px;
box-shadow: 0 5px 0 #b30000;
border-radius: 4px;
}
.form-style-5 input[type="backButton"] {
position: relative;
display: block;
padding: 10px 39px 10px 39px;
color: #FCFBE3;
margin: 0 auto;
background: red;
font-size: 22px;
text-align: center;
font-style: normal;
width: 140px;
border: 1px solid red;
border-width: 1px 1px 3px;
margin-bottom: 10px;
box-shadow: 0 5px 0 #b30000;
border-radius: 4px;
}
.form-style-5 input[type="submit"]:active,
.form-style-5 input[type="button"]:active {
transform: translateY(3px);
box-shadow: 0 2px 0 #b30000;
}
.form-style-5 input[type="submit"]:focus,
.form-style-5 input[type="button"]:focus {
outline: 0;
}
.next {
-webkit-transition-duration: .01s;
-moz-transition-duration: .01s;
-o-transition-duration: .01s;
transition-duration: .01s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
#backSide {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
#backButton {
background: red;
color: white;
box-shadow: 0 2px 0 #b30000;
border-radius: 4px;
border-color: red;
position: absolute;
float: left;
left: 15px;
top: 3px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
width: 90px;
height: 27px;
font-size: 105%;
outline: 0;
}
#name,
#contact,
#location,
#misc,
#job {
height: 5%;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="formFlipAgain">
<div class="form" style="background-color:black">
<div class="form-style-5" id="form-style-5-Animation">
<div id="frontSide">
<form action="send-sms.php" method="POST">
<input type="text" name="field1" id="name" placeholder="Your Name *">
<input name="next" type="button" value="Next ⇾" class="next" onClick="showBack();" />
</div>
<div id="backSide" style="display: none;">
<input name="back" class="Button" type="button" onClick="showFront();" value="⇽ back" id="backButton" />
</div>
</div>
</form>
</div>
</div>
&#13;