Styling an element with CSS through JavaScript manipulation

Question

Styling an element with CSS through JavaScript manipulation

Welcome to my first post here! :)

So, I'm currently working on a project for my college where I need to create "task notes" that fade in each time I add one to an array.

.note_input {
    height:255px;
    width:200px;
    background-image:url('../img/notebg.png');
    padding-top:25px;
    padding-left:10px;
    display:inline-block;
    animation: fadein 2s; 
    -webkit-animation: fadein 2s; 
}
    @keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-webkit-keyframes fadein { 
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }

That's the CSS for the note design.

Now, here is my JavaScript code:

function Note(){
    notes_p = JSON.parse(notes_j);
    var note_d = "<div>";
    for (var i = 0 ; i < notes.length ; i++) {
        note_d += "<span class='note_input'>" + "<div class='flow' ><p>"+notes[i].input+"</p></div></br>" + "</br>" +"Time:  "+ notes[i].time + "</br>" +"Date:  "+ notes[i].date;
        note_d +=  "</span>";
        };
    note_d += "</div>";
    document.getElementById("note_div").innerHTML = note_d;
    console.log(notes_p);
}

However, I am facing an issue where each new note fades in, causing the entire array to run over. Any suggestions on how I can make only a single note appear in fade each time without interfering with the others?

javascript html css

Answer 1

Answer №1

Visit this link to see the example in action

Forget about IDs, what really matters is applying animations to notes using JavaScript dynamically. It's important not to have any pre-applied animations on the note initially.

To add an animation programmatically, you can use code like this:

ele.style.animation = "animation duration etc...";

If your animation needs a default parameter for its starting point, you can skip that part. For instance, in the CSS provided below, only the 'to{}' is used as 0 opacity is already set as a default by the css.

Here's a snippet of the CSS:

.note {
  opacity: 0;
  transition: all .3s ease-in-out;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}

And in JavaScript:

 let arr = [].slice.call(document.querySelectorAll('.note'));

for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    arr[i].style.animation = "fadein 2s";
  }, 500 * i);
}

The provided example at this link demonstrates how the notes are staggered. Hopefully, this aligns with what you were looking for.

Answer 2

Visit this link to see the example in action

Forget about IDs, what really matters is applying animations to notes using JavaScript dynamically. It's important not to have any pre-applied animations on the note initially.

To add an animation programmatically, you can use code like this:

ele.style.animation = "animation duration etc...";

If your animation needs a default parameter for its starting point, you can skip that part. For instance, in the CSS provided below, only the 'to{}' is used as 0 opacity is already set as a default by the css.

Here's a snippet of the CSS:

.note {
  opacity: 0;
  transition: all .3s ease-in-out;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}

And in JavaScript:

 let arr = [].slice.call(document.querySelectorAll('.note'));

for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    arr[i].style.animation = "fadein 2s";
  }, 500 * i);
}

The provided example at this link demonstrates how the notes are staggered. Hopefully, this aligns with what you were looking for.

Answer 3

Answer №2

Instead of recreating the entire list with .innerHTML, it's more efficient to use

HTMLElement.appendChild(HTMLElement)

. This way, the browser won't have to restart the animation on all note items each time an update is made.

Here's an example...

var newNote = document.createElement('div');
newNote.innerHTML = note_d;
document.getElementById("note_div").appendChild(newNote);

Answer 4

Instead of recreating the entire list with .innerHTML, it's more efficient to use

HTMLElement.appendChild(HTMLElement)

. This way, the browser won't have to restart the animation on all note items each time an update is made.

Here's an example...

var newNote = document.createElement('div');
newNote.innerHTML = note_d;
document.getElementById("note_div").appendChild(newNote);

Styling an element with CSS through JavaScript manipulation

Answer №1

Answer №2

Similar questions

How can I fill the data array of arrays using an Angular Table component?

Tips on handling a JSON string alert

Add a filter and set a background color on the rows in jqGrid

What is the functionality of the CSS switch button?

A <div> with 100% height nested within a full-page div positioned at top:0 and bottom:0

Issues with Functioning of Control Buttons in Bootstrap 4 Carousel

Unable to initiate script on dynamically appended element

Creating an HTML Menu in PHP by Parsing JSON

Changing Axios requests to send data as a JSON objectDo you need to know how

What is the best way to extend this dropdown menu to span the entire width of the page?

Executing jQuery function after the .load() method has completed

Steps for installing an npm package from a downloaded folder

Storing multiple arrays with Mongoose rather than just one array

Executing a function without using the eval() function

Creating a design that can adapt to different screen sizes by utilizing CSS

The session variable is not accessible in an AJAX function

implementing a like button next to every item on a list using ajax

Is it possible to configure Express.js to serve after being Webpacked?

Opt for utilizing local data table files instead of relying on a content delivery network (CD

Tips for integrating highcharts plugins with highcharts-vue (highcharts vue wrapper)