javascript - 如何将类动画限制为单击的元素及其内容

Question

我知道这个问题已经被问到并得到了回答，但这里的情况稍微复杂一些。我有一张卡片列表，点击后全部设置为动画。当然，动画是通过使用 toggleClass() 命令创建的，最初的问题是，如果我单击一张卡片，所有卡片都会动画化。使用 $(this) 语句很容易解决这个问题。但是，我随后决定向卡片添加内容，只有在单击卡片后才会显示这些内容。我原以为这也会受到 $(this) 语句的影响，但事实并非如此，现在当我单击一张卡片时，该卡片会动画化，但也会显示其他卡片的内容。

$(".card").click(function() {
  $(this).toggleClass("transform-active");
  $(".disappear").toggleClass("appear");
});

/* CARDS SECTION */

.cards {
  display: block;
  position: absolute;
  width: 100%;
  top: 60px;
  list-style: none;
  text-decoration: none;
  z-index: -1;
}

.cards li {
  display: block;
  position: relative;
  width: 100%;
  padding-bottom: 10px;
}

.card {
  position: relative;
  background-color: #ffffff;
  height: 150px;
  width: 100%;
  left: -5%;
  border-radius: 8px;
  box-shadow: 2px 2px 2px #686868;
  cursor: pointer;
}


/* CARDS CONTENT SECTION */

#containText {
  position: absolute;
  width: 76%;
  color: #58a7dd;
  top: -2px;
  left: 90px;
  text-align: justify;
}

#containText p {
  position: absolute;
  top: 30px;
}

.face {
  position: relative;
  height: 70px;
  width: 70px;
  top: 10px;
  left: 10px;
  border: solid #58a7dd;
  background-color: white;
  border-radius: 50%;
  color: #58a7dd;
}

.face h2 {
  position: relative;
  left: 3px;
  top: 20px;
  transform: rotate(90deg);
}

.extra {
  position: relative;
  width: 90%;
  top: 7px;
  margin: auto;
  color: #2f4f4f;
}

.disappear {
  position: relative;
  width: 90%;
  height: 40%;
  top: 5px;
  margin: auto;
  color: #2f4f4f;
  opacity: 0;
}

.appear {
  animation: appear 1.2s ease;
  animation-fill-mode: forwards;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.transform {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.transform-active {
  background-color: #ffffff;
  height: 300px;
  width: 100%;
  box-shadow: 6px 6px 6px #888888;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cardList" class="cards">
  <li>
    <div class="card transform">
      <div class="face">
        <h2>: )</h2>
      </div>
      <div id="containText">
        <h3>HI! I am a card.</h3><br>
        <p>Click me to trigger the animation.</p>
      </div>
      <div class="extra">
        <p>Here is some extra info about the items on this card, such as stuff, things and blah.</p>
      </div>
      <div class="disappear">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </li>
  <li>
    <div class="card transform">TWO</div>
  </li>
  <li>
    <div class="card transform">THREE</div>
  </li>
  <li>
    <div class="card transform">FOUR</div>
  </li>
  <li>
    <div class="card transform">FIVE</div>
  </li>
  <li>
    <div class="card transform">SIX</div>
  </li>
</ul>

带有工作示例的 CodePen:https://codepen.io/BGGrieco/pen/PjOevR

Answer 1

那是因为您要求 所有 .disappear 元素 .appear。

$(".disappear").toggleClass("appear");

您没有以任何方式指定您希望 div.disappear within this 到 toggleClass('appear') 。

试试这个:

$(this).children('.disappear').toggleClass('appear');