Question

我有一个很好的CSS生成卡列表。它们包含图标和文本，并且一旦点击它们就可以展开一个很好的动画，以显示更多图标和选项。我对列表进行了硬编码，并使其看起来和行为完全符合我的要求。

现在，我在数据库上有一些JSON数据，我想使用该数据动态填充列表。

问题：除了CSS动画不再适用外，它的效果很好。

我该如何解决这个问题？这是我的代码。

HTML ：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
    <link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/customFitFunctions.js"></script>
  </head>
  <body>

    <!--APPEND CARDS-->
    <ul id="cardList" class="cards">

    </ul>
  </body>
</html>

的JavaScript ：

    // Sync with Firebase in real time.
    dbRef.on("value", snap =>
    {
      var workouts = snap.val();

      for (var i = 0, len = workouts.length; i < len; i++) // Populate list.
      {
        $("#cardList").append("<li><div class='card transform'>\n\
        <div class='cardInfo'><h3>" + workouts[i].title + "</h3><p>10 min.</p><a class='startIt' href='timer.html'>\n\
        <img src='images/playIcon.png' width='70' alt='' /></a><div class='infoIcons'>\n\
        <img src='images/thorso.png' width='48' alt='' /><img src='images/legs.png' width='28' alt='' />\n\
        <img src='images/cardio.png' width='48' alt='' /></div><div class='timeIcon'>\n\
        <img src='images/tenMinutes.png' width='66' alt='' /></div></div>\n\
        <div class='disappear'><div class='playIt'><a class='playButton' href='timer.html'>\n\
        <img src='images/playButtonUp.png' width='100' alt='' /><img src='images/playButtonDown.png' width='95' alt='' /></a>\n\
        </div><div class='deleteIt'><a class='deleteButton' href='#'>\n\
        <img src='images/thrashButtonUp.png' width='60' alt='' />\n\
        <img src='images/thrashButtonDown.png' width='55' alt='' /></a></div><div class='modifyIt'>\n\
        <a class='modifyButton' href='#'><img src='images/cogButtonUp.png' width='100' alt=''/>\n\
        <img src='images/cogButtonDown.png' width='95' alt='' /></a></div></div></div></li>");
      }
    });

jQuery的：

  // Triggers CSS animation for cards.
  $(".card").click(function()
  {
    $(this).toggleClass("transformActive");
    $(".disappear", this).toggleClass("appear");
  });

CSS：

/**
* ROUTINE CARDS SECTION
*
*/
/* Style cards and content */
.cards
{
  position: absolute;
  width: 100%;
  top: 60px;
  list-style: none;
  text-decoration: none;
  text-align: center;
  z-index: -1;
}

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

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

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

.transformActive
{
  background-color: #ffffff;
  height: 260px;
  width: 100%;
  box-shadow: 6px 6px 6px #888888;
}

/* CARD CONTENT SECTION */
.cardInfo
{
  position: relative;
  margin: auto;
  width: 95%;
  height: 130px;
  text-align: left;
}

.cardInfo h3
{
  position: relative;
  top: 5px;
}

.cardInfo p
{
  position: relative;
  color: black;
  text-align: right;
  top: -40px;
}

.startIt
{
  position: absolute;
  bottom: 0px;
}

.timeIcon
{
  position: absolute;
  bottom: 0px;
  left: 78%;
}

.infoIcons
{
  position: relative;
  margin: auto;
  top: -20px;
  width: 52%;
  height: 100px;
}

.infoIcons img
{
  margin-left: 6px;
}

#holder
{
  position: relative;
  width: 100%;
  height: 80px;
}

/* CARD ANIMATION */
.disappear
{
  position: relative;
  width: 95%;
  height: 40%;
  top: 8%;
  margin: auto;
  opacity: 0;
}

.appear
{
  -webkit-animation: appearFade 1.2s ease forwards;
  -moz-animation: appearFade 1.2s ease forwards;
  -o-animation: appearFade 1.2s ease forwards;
  -ms-animation: appearFade 1.2s ease forwards;
  animation: appearFade 1.2s ease forwards;
}

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

/* CARD OPTIONS ICONS */
.playIt
{
  position: absolute;
  left: 0px;
}

.playButton img:last-child
{
  display: none;
}

.playButton:hover img:first-child
{
  display: none;
}

.playButton:hover img:last-child
{
  display: inline-block;
  position: relative;
  left: 3px;
  top: 3px;
}

.deleteIt
{
  position: relative;
  margin: auto;
  top: 25px;
}

.deleteButton img:last-child
{
  display: none;
}

.deleteButton:hover img:first-child
{
  display: none;
}

.deleteButton:hover img:last-child
{
  display: inline-block;
  position: relative;
  left: 2px;
  top: 2px;
}

.modifyIt
{
  position: absolute;
  right: 0px;
  top: 0px;
}

.modifyButton img:last-child
{
  display: none;
}

.modifyButton:hover img:first-child
{
  display: none;
}

.modifyButton:hover img:last-child
{
  display: inline-block;
  position: relative;
  left: 0px;
  top: 3px;
}

Answer 1

检查删除</div>中的<div class="card transform">关闭标记是否有效。我不知道，你是如何使用你的css类，但看起来像childs元素在父div容器之外。

Css动画不适用于JSON列表

1 个答案: