javascript - jQuery 弹出和 div 元素的过渡

Question

我在下面创建了一个表单，我想用它来代替提示框。我想让它在加载时弹出橡皮筋效果，然后当用户单击“确认”时，它将输入存储在我的 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>

Answer 1

你的需求我已经做了~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>