个人中心
gpt4 book ai didi

javascript - Css 动画不适用于 JSON 列表

转载 作者：太空宇宙 更新时间：2023-11-04 01:32:23 25 4
gpt4 key购买 nike

我有一个很好的 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;
}

最佳答案

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

关于javascript - Css 动画不适用于 JSON 列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46831936/

25 4 0
文章推荐： python - 使用 ElementTree 输出 "unused"XML 命名空间
文章推荐： python - Pandas ，如何引用时间序列项？
文章推荐： python - Django - 如何使实现字段成为必需的？
文章推荐： javascript - 图片库变暗按钮
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com