javascript - 单击按钮翻转 div 的内容

Question

我正在学习翻转 div 内容的 3D 效果。悬停时，下面的 div 代码可以完美运行。但我想要的是，如果有人只点击按钮翻转，这个 div 翻转应该起作用。仅当单击按钮而不是悬停或其他任何内容时，我才需要这种翻转效果。

    <style>
    #f1_container {
      position: relative;
      margin: 10px auto;
      width: 450px;
      height: 281px;
      z-index: 1;
    }
    #f1_container {
      perspective: 1000;
    }
    #f1_card {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: all 1.0s linear;
    }
    #f1_container:hover #f1_card {
      transform: rotateX(180deg);
      box-shadow: -5px 5px 5px #aaa;
    }
    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }
    .face.back {
      display: block;
      transform: rotateX(180deg);
      box-sizing: border-box;
      padding: 10px;
      color: white;
      text-align: center;
      background-color: #aaa;
    }
    </style>

    <div id="f1_container">
    <div id="f1_card" class="shadow">
      <div class="front face">
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
    lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />lets see if anything happen <br />
      </div>
      <div class="back face center">
        <p>This is nice for exposing more information about an image.</p>
        <p>Any content can go here.</p>
      </div>
    </div>
    </div>
<button class="btn btn-primary" id="flip_content">Flip</button>

Answer 1

您可以使用 JavaScript 来处理 button 上的点击事件。

1^st 方法:使用 .classList.toggle()。

content.classList.toggle('flip') 将添加 .flip 类(如果它不存在)，如果存在则将其删除。

var btn = document.getElementById('flip_content');
var content = document.getElementById('f1_card');
btn.onclick = function() {
  content.classList.toggle('flip');
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.flip {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face">
      lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />
    </div>
    <div class="back face center">
      <p>This is nice for exposing more information about an image.</p>
      <p>Any content can go here.</p>
    </div>
  </div>
</div>
<button class="btn btn-primary" id="flip_content">Flip</button>

---

第 2 方法:使用 .classList.add() 和 .classList.remove()。

您可以跟踪点击次数，如果计数可以被 2 整除，则添加类 .flip，否则将其删除。

var btn = document.getElementById('flip_content');
var content = document.getElementById('f1_card');
var c = 0;
btn.onclick = function() {
  (c++ % 2 == 0) ? content.classList.add('flip'): content.classList.remove('flip');
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.flip {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face">lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />
    </div>
    <div class="back face center">
      <p>This is nice for exposing more information about an image.</p>
      <p>Any content can go here.</p>
    </div>
  </div>
</div>
<button class="btn btn-primary" id="flip_content">Flip</button>

---

第 3^rd 方法:使用 .className。

var btn = document.getElementById('flip_content');
var content = document.getElementById('f1_card');
var c = 0;
btn.onclick = function() {
  content.className = (c++ % 2 == 0) ? content.className + ' flip' : content.className.split(' ')[0];
}

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.flip {
  transform: rotateX(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="f1_container">
  <div id="f1_card" class="shadow">
    <div class="front face">lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />lets see if anything happen
      <br />
    </div>
    <div class="back face center">
      <p>This is nice for exposing more information about an image.</p>
      <p>Any content can go here.</p>
    </div>
  </div>
</div>
<button class="btn btn-primary" id="flip_content">Flip</button>

---

.classList 返回分配给元素的所有 class 的数组。

例如，

<div id="div" class="one two three four five"></div>

document.getElementById('div').classList
//['one', 'two', 'three', 'four', 'five']

---

.className 返回分配给元素的所有 classes(逗号分隔)的字符串。

例如，

<div id="div" class="one two three four five"></div>

document.getElementById('div').className
//'one two three four five'

---