Unable to apply CSS animations to a JSON-generated list

I created a visually appealing collection of CSS cards with icons and text that expand with a tap to reveal more options. After hard coding the list to perfection, I now aim to populate it dynamically using JSON data from a database.

Challenge: While the dynamic population works fine, the CSS animations no longer function as intended.

How can I address this issue? See my code below.

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

Answer №1

Try deleting the closing </div> tag from the 

<div class="card transform">
. It seems like your CSS classes may be causing the child elements to render outside of the parent div container.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Webpack failing to generate CSS and JavaScript files

I have encountered an issue while working with Laravel and Vue.js. Upon running NPM run dev, my Sass files are not compiling as expected and are instead being generated in the /public directory. I am unable to share the code due to non-disclosure agreeme ...

javascriptphplaravelwebpackvue.js

Is it possible to establish a connection between React and a MySQL Database?

I've been encountering issues with connecting to a remote database in React. Despite my efforts, I haven't been successful in establishing the connection. I have tried various solutions without any luck. The goal is simple - I just want to connec ...

javascriptmysqlreactjsexpress

Effective methods for eliminating Stripe's iframes

I am integrating Stripe Elements using vue-stripe-elements-plus on a single page application. I want to completely unload Stripe after the user leaves the credit card module, but it seems more complicated than expected. Even after unloading it in the comp ...

javascriptvue.jsiframestripe-payments

Insert a new key with a value into PostgreSQL only if it does not already exist. If the key exists, update its

Having an issue with updating columns that have NULL values or do not contain a specific key. Here is the code I am trying to run: update A a set a.jsonbcolumn = ('{"key":' 1 '}') I'm currently using postgres version 9.6.3 and u ...

jsonpostgresqlsql-updatejsonb

"Unlocking the Power of jQuery and jTemplates: A Guide to Extracting Accurate Values

I am facing challenges in configuring the correct format for jTemplates and could really use some assistance. My setup includes an ASP.NET page with a WebMethod that returns data to jQuery. The data is then supposed to be processed by jTemplates, but I am ...

jqueryasp.netjtemplates

Struggling to retrieve accurate JSON data from a hashmap using Gson

Utilizing GSON and hashmap to retrieve JSON data from a Pojo class. Here is an example of the Pojo Class: public class NetworkConfiguration { @SerializedName("GUID") @Expose private String gUID; @SerializedName("Name") @Expose pri ...

javajson

How to use JQ to search for both boolean values and arrays simultaneously

As a newcomer to Jq, I'm facing some challenges getting started. I'm working on a new bash script that retrieves a .json file from a URL and I'm trying to grep multiple values but only save domains to a new file as output. For instance, I ...

jsonselectjq

Exploring Arrays in Ansible

After analyzing the JSON data provided below: { "nodes":[ { "node_values":[ "[test1]", "10.33.11.189", "10.33.11.185" ] }, { "node_values":[ "[test2]", "10.33.11.189", "10.33.11.185" ...

arraysjsonansible

Transmit messages from server (via Expressjs routing) to the client

I am looking for guidance on how to effectively send messages from the server to the client and incorporate this functionality into routes/index.js within my mean stack project. Can anyone provide insights on using socket.io in this context?: router.post( ...

javascriptexpressnpmwebsocketsocket.io

What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

I have a variable called demoVars, which is an array of objects with properties var1, var2, and var3. In my component class, I have a variable named selectedVar that holds the name of one of these properties: var1, var2, or var3. I want to dynamically pu ...

javascriptangularjstypescriptstring-interpolation

Vue 3 array error: Additional attributes not designated as props were passed to the component and could not be inherited automatically

Hey there, I'm currently delving into learning VueJS 3 and facing a beginner issue. When I check the browser developer console, I come across this warning message: https://i.stack.imgur.com/5eo6r.png The warning message reads as follows: [Vue warn]: ...

javascriptarraysvue.jswarningsvuejs3

Interact with Javascript by clicking and dragging to spin around

Looking for assistance with rotating an element (like a dial) using click and drag. The concept is there, but there are some glitches that need fixing. You can view my current example here: https://jsfiddle.net/o5jjosvu/ When clicking and dragging inside ...

javascriptjqueryrotation

Effortlessly Concealing Numerous Elements with a Single Click in Pure JavaScript

I have successfully created an HTML accordion, but I am facing an issue. I want to implement a functionality where clicking on one accordion button will expand its content while hiding all other accordion contents. For example, if I click on accordion one ...

javascripthtml

What is the reason why setting 'onClick' as an event handler is not flagged as a syntax error?

I am currently working on a JavaScript code snippet where I am trying to change the headline text when it is clicked. The code I have written is: var headline = document.getElementById("mainHeading"); headline.onClick = function() { headline.innerHTML ...

javascriptjavascript-debugger

Showing the precise age in years by utilizing the provided 'Date of Birth' selected from the datePicker

Is it possible to retrieve the date entered in the datePicker and use it to populate the current age field in a PHP file using either PHP or Javascript? if ($key == 'currentage') { $group[] = $this->form->createEleme ...

javascriptphphtml

An issue in ASP.net user control not triggering a specific javascript function

I am currently working on an asp.net web application where I have implemented a repeater that calls a registered user control. Within this user control, there is a button that is supposed to trigger a Javascript function to make an Ajax call for server-sid ...

c#javascriptasp.net

Having trouble getting CSS animation to work on Mozilla using mozAnimationName?

<style> @keyframes shake { 0% { -moz-transform:scale(0);opacity:0; } 25% { -moz-transform:scale(1.3);opacity:1; } 50% { -moz-transform:scale(0.7);opacity:1; } 75% { -moz-transform:scale(2); ...

javascriptcsscss-animations

Utilize Angular 6 [ngClass] to dynamically add a class composed of multiple variables through direct string concatenation within [ngClass]

Currently, I am working with Angular 6 and I have the following variables: var1 = 'my'; var2 = '-'; var3 = 'class'; I am trying to achieve something like this: <div [ngClass]='var1 + var2 + var3'></div> ...

javascripthtmlangulartypescript

What is the best way to retrieve information from a json file using axios in a React project?

I'm having trouble retrieving JSON data. { ID string `json:"id"` Amount int `json:"amount"` Month string `json:"month"` PayFailed bool `json:"pay_failed"` } I’ve written the foll ...

javascriptjsonreactjsecmascript-6axios

Creating a new dictionary to track the variations in values between two nested dictionaries

In my dictionary (long_dict), I have data organized into 3 categories for different individuals. My goal is to compare the values in a specific category (category_2) and store their differences in a new dictionary. long_dict = { 'PERSON1':{ &ap ...

jsonpython-3.xdictionary