Question

我正在尝试自学HTML，CSS和JS，并开始在codepen.io上玩。当我点击按钮“创建帐户”或“提交”时，我一直在努力让div（在此笔http://codepen.io/janicedarling/pen/MwNZVp上）翻转。目前正在使用本教程http://callmenick.com/post/css-transitions-transforms-animations-flipping-card 当点击任何地方时，我能够让div翻转。我尝试在javascript中更改此内容 document.querySelectorAll(".tab");
到
document.querySelector("#create");
但后来没有任何事情发生。我把CSS留在了原地。任何人都可以提供有关如何获得所需转换的任何建议吗？

Answer 1

首先，在提交按钮中添加id：

    <input id="signup" type="submit" placeholder="Go">

接下来，让我们修复你的JS。您不需要来自其他示例的一堆代码来查找要连接的所有不同的卡。在您的情况下，您只有一张卡，并且您只需要两个事件回调（一个用于翻转，另一个用于取消翻转）。我们在这里使用新的id来找到导致un-flip的特定按钮。

(function() {
  var tab = document.querySelector('.tab');

  document.getElementById('create').addEventListener('click', function() {
    tab.classList.add('flipped');
  }, false);

  document.getElementById('signup').addEventListener('click', function() {
    tab.classList.remove('flipped');
  }, false);

})();

有了这个，两个特定按钮连接到翻转和非翻转动作，因此卡只会在您需要时翻转。

只需单击div上的按钮即可翻转div

1 个答案: