单击单独的DIV时取消动画状态

我有一组卡，以及用户单击卡时发生的一些CSS动画。我对结果感到满意，但我有问题：如果我单击卡片，它可以动画并揭示额外的内容。如果我再次单击它，它将恢复为简化的状态。如果我单击一张卡，然后单击另一张而不"关闭"上一张卡，它们都保持动画。我该如何做到这一点，以便当我单击卡时，所有其他卡都恢复到其未动画状态？html：

<html>
  <head>
    <meta charset="UTF-8">
    <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></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>

CSS：

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;
}

jQuery：

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

工作演示：https：//codepen.io/bggrieco/pen/pjoevr

简单地存储上一个，然后在单击上隐藏：

var previous;
$(".card").click(function(){
  if(previous) 
     $(previous).removeClass("transform-active");
  if(previous !== this) 
     $(this).addClass("transform-active");
  previous = this;
});

只是一个想法：在所有具有类"卡"的元素上迭代，然后在将新类分配给单击卡之前重置其实际类？

$(".card").click(function()
{
  // Reset all cards
  $(".card").each(function(){
     $(this).removeClass("transform-active");
     $(this).addClass("transform");
     // Reset their children with class "appear" as well
     $(this).children(".appear).each(function(){
       $(this).removeClass("appear");
       $(this).addClass("disappear");
     }
  });
  // Now set transform-active to the clicked card ...
  $(this).addClass("transform-active");
  $(this).removeClass("transform");
  // ... and all of its children with class "disappear" as well
  $(this).children(".disappear).each(function(){
     $(this).addClass("appear");
     $(this).removeClass("disappear");
  }
});

相关内容

最新更新

热门标签：