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

【问题标题】：How to limit class animations to clicked elements and their content如何将类动画限制为单击的元素及其内容
【发布时间】：2017-12-09 13:09:22
【问题描述】：

我知道有人提出并回答了这个问题，但这里的情况稍微复杂一些。我有一张卡片列表，点击后全部设置为动画。当然，动画是使用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

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

你需要改变：

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

到：

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

这样，您将只在当前单击的元素中定位<div> 元素，其类为.disappear。

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

.cards
{

  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.cards li
{
  width: 100%;
  padding-bottom: 10px;
}

.card
{
  background-color: #ffffff;
  height: 150px;
  width: 100%;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 2px 2px 2px #686868;
  cursor: pointer;
}

/* CARDS CONTENT SECTION */
#containText
{
  position: absolute;
  width: 76%;
  color: #58a7dd;
  top: -2px;
  left: 120px;
  text-align: justify;
}

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

.face
{
  height: 70px;
  width: 70px;
  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>

【讨论】：

【解决方案2】：

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

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

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

试试这个：

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

【讨论】：

谢谢，这个超级有用！我不知道 .children()。

【解决方案3】：

尝试将您的 JS 更改为以下内容：

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

您的问题是您将所有元素的“出现”类与“消失”类切换，它涵盖了所有卡片的内容，包括那些不活动的卡片。

在 jQuery 的 select 语句中添加 this 会将 'disappear' 的上下文限制在 this 的范围内。（见http://api.jquery.com/jquery/#jQuery1）

这里是修改后的 CodePen：https://codepen.io/williamli/pen/LLBPOv

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

body
{
  position: relative;
  background-color: #f9f9f9;
  font-family: "arial";
  margin: 0;
  padding: 0;
}

.header p
{
  text-align: center;
  font-weight: lighter;
  font-size: 20px;
  line-height: 12px;
  color: white;
}

/* APP BARS SECTION */
.header
{
  position: fixed;
  top: 0%;
  width: 100%;
  height: 50px;
  background-color: #d36363;
  box-shadow: 0px 6px 6px #888888;
  z-index: +1;
}

.footer
{
  position: fixed;
  bottom: 0%;
  width: 100%;
  height: 50px;
  background-color: #d36363;
  box-shadow: 0px -6px 6px #888888;
}

/* 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/1.2.3/jquery.min.js"></script>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styling.css" type="text/css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <!--HEADER-->
    <div class="header">
      <div id="info">
        <p>Current Page</p>
      </div>
    </div>

    <!--CARDS-->
    <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 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">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>

    <!--FOOTER-->
    <div class="footer"></div>
  </body>

【讨论】：

谢谢！就可以了。我不知道你可以用逗号在对象中添加 this，这非常有用！