transitionEnd | browser library to work with transitionend event | Frontend Framework library

I have a function that craeates divs with a circle.

Now they are all created and appear at the beginning of the page and go further in order.

Next, I need each circle to appear in a random place. I did this.

Now I need all of them to move randomly across the entire page, I have difficulties with this.

Here is an example of how everything works for one element that is already on the page.

https://jsfiddle.net/quej8wko/

But when I add this code, all my created circles don't move.

I get an error:

"message": "Uncaught TypeError: Cannot set properties of null (setting 'willChange')",

This is probably due to the fact that initially there are no circles on the page. How can I connect the code so that all created circles move?

I have four div with image and I want to add a class .open when clicked on the panel and remove this class from last div when clicked on another div.

I want a navbar with 3 input filters for multiple values. The filters should be inline, like default bootstrap navbar.

Im using bootstrap 4 and this tags plugin.

The plugin itself works fine and the navbar itself work fine too, but when using togehter the style breaks and it makes a new line for each filter.

How can I style the inputs with CSS to not add a new line and keep the original bootstrap design?

In below example, I just added the tags logic to the 3rd filter to show the line break.

In this snippet below, I'm trying to apply a slide down functionality to each panel when opened. The result is that slide down is working.

The problem is...

1. In mobile, when a second panel is opened, the first panel remains at full height.

2. Slide up functionality isn't working as expected.

Lastly, I have hundreds of these accordions on my site. I need to be able to update the JS/CSS accordingly, without changing the HTML markup.

How do I apply JavaScript slide up/down functionality to accordion panels when opened?

If you click repeatedly and very fast on the div it will stop doing the animation and the transform class won't get removed. this is the code:

I'm currently trying to add my widget to an Angular 9 product. It is making the website load indefinitely although the widget loads fine. When I remove document.body.innerHTML the website loads fine.

What are some alternatives for document.body.innerHTML that would work with Angular 9.

I attached the code below:

The Codepen linked below is where I currently am stuck.

I need the element to transition (with an added class), then restore upon completion of said transition (by removing the class). This works, but only on the last element in the collection (no matter how many are there). How can I get the transitionEnd to fire on each element, rather than only the very last one?

I have tried various time outs, etc. in place of the .on('webkitTransitionEnd... nothing has worked so far.

I can not fire them off sequentially as it would take too long. There are dozens that need to be fired simultaneously.

Is there a way to queue this, or am I approaching this the wrong way altogether?

In the real application, text gets changed and other things happen between cycles, that is why can just use keyframes to get it to swing down, wait then go back up.

Thanks in advance, and please advise if I should post/phrase this question differently.

i'm trying to detect when an animation ends however the child items are triggering this event listener.

So if you see the code below only the height on the element with the reference of container should trigger the listener, however if you check the console you will see that the background transition is firing this instead.