我有一个我在下面创建的表单,我想用它来代替提示框。我想让它在加载时弹出橡皮带效果,然后当用户点击“确认”时,它将输入存储在我的javascript文件中的变量中,3d转换为z轴稍微增长(似乎朝着屏幕)当它从左侧过渡并缩小到略小于原始尺寸时。我不知道如何做到这一点。有人能帮助我吗?
<form id="player-one" onsubmit="return false;">
<input type="text" class="form-control" placeholder="Player : : 1">
<button type="submit" class="btn btn-default">
Confirm
</button>
</form>
答案 0 :(得分:2)
我已经满足了大约80%的需求,但我不知道你所说的最后一个效果是什么。
只要你能告诉我类似的东西,或者更好地解释它,我就会更新答案。
看一下下面的例子。
document.addEventListener('DOMContentLoaded', function() {
var popup = document.getElementById('language-popup');
popup.classList.add('animated', 'bounceIn');
document.querySelector('a.close').addEventListener('click', function(e) {
popup.classList.add('hidden');
});
document.getElementById('player-one').addEventListener('submit', function(e) {
e.preventDefault();
popup.classList.add('animated', 'zoomoutdown');
var txt = document.getElementById('txtPlayerOne');
// use the txt.value to store it to the variable you want
});
});
.hidden {
display: none;
}
#language-popup {
background-color: #AAAAFF;
font-family: Verdana;
padding: 12px;
border-radius: 10px;
width: 300px;
height: 150px;
position: absolute;
top: 50px;
}
#language-popup h3 {
text-align: center;
}
#language-popup ul {
list-style-type: none;
}
#language-popup a {
text-decoration: none;
color: black;
}
#language-popup a:hover {
text-decoration: underline;
}
#language-popup .close {
float: right;
}
#language-popup .close:hover {
text-decoration: none;
}
#language-popup .close:after {
content: '✖';
cursor: pointer;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@keyframes zoomoutdown {
40% {
opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
to {
opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
.zoomoutdown {
animation-name: zoomoutdown;
}
<div id="language-popup">
<a class='close'></a>
<h3>Player</h3>
<form id="player-one">
<input id="txtPlayerOne" type="text" class="form-control" placeholder="Player : : 1">
<input type="submit" class="btn btn-default" value='Confirm' />
</form>
</div>