0
Ich habe eine einfache 2-seitige "Karte" mit einer Taste auf der Vorderseite (gekennzeichnet "nächste") und eine andere Taste auf der Rückseite (mit der Aufschrift "zurück"). Jede Schaltfläche löst jquery aus, um die "Karte" vertikal zu drehen, wobei eine Übergangsdauer von 2s verwendet wird, so dass sichtbar ist, dass die Karte "gewendet" wird und nicht nur eine Sofortumdrehung. Mein Problem ist, dass, nachdem ich jeden Knopf einmal gedrückt habe, ich nicht die "Übergangsdauer/Animationsdauer" bekommen kann, um wieder auszulösen. Ich kann versuchen, es in meine Jquery-Funktion zu setzen, aber ich verstehe nicht, warum meine CSS-Animationsdauer nicht bei jedem Klick ausgelöst wird (es funktioniert nur für 1 Klick pro Button, die "Karte" kippt entsprechend nach hinten und dann wieder nach vorne, sobald ich die Tasten einmal drücke). Ich habe die meisten Informationen aus meinem Formular herausgenommen, daher ist es etwas einfacher zu sagen, wonach ich frage. Jede Hilfe wäre willkommen.Wiederhole CSS-Übergang/Animationsdauer kontinuierlich auf Knopfdruck?
$(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>
so ... bin ich Missverständnis Ihr Problem? – Carr
@Carr Nein, Sie haben mein Problem perfekt gelöst, DANKE! Einfache Lösung, aber es war ein großer Blocker für mich. Einen schönen Tag haben :) –
Es ist mir ein großes Vergnügen ~~ – Carr