Animacja wielu elementów

pytanie zadane 6 lipca 2019 w JavaScript przez matrimex Użytkownik (810 p.)

Cześć,

mam taki problem, że potrzebowałem animacji do liczb , no to uznałem, że wezmę gotowca i tak zrobiłem, wziąłem:

https://github.com/bfintal/Counter-Up2 , podpiąłem i wszystko śmiga, problem jest, że autor podaje:

import counterUp from 'counterup2'

const el = document.querySelector( '.counter' )

counterUp( el, {
    duration: 1000,
    delay: 16,
} )

Czyli pobiera mi tylko jeden element .counter a ja mam ich kilka i chcę, żeby animowały się wszystkie, stwierdziłem, że z el zrobię querySelectorAll , albo jako tablicę, ale tu jest mój problem, że w jego kodzie (tak mi się wydaje) elementy są jako liczba pojedyncza i nie mogę tak, a przynajmniej wyskakuje mi taki błąd w konsoli:

counter.js:57 Uncaught TypeError: Cannot set property 'visibility' of undefined
    at stopCountUp (counter.js:57)
    at counterUp (counter.js:15)
    at my-counter.js:5

Tutaj jest plik counter.js: https://github.com/bfintal/Counter-Up2/blob/master/index.js

* my-counter.js to jest ten kod co u góry wkleiłem

Idzie to jakoś rozwiązać czy tylko ten kod będzie działał do jednego elementu i jak chcę do wszystkich to powinienem wziąć jakiś inny? (jak tak to jaki?)

Pozdrawiam

2 odpowiedzi

odpowiedź 6 lipca 2019 przez Chess Szeryf (76,710 p.)
edycja 6 lipca 2019 przez Chess

<body style="background: darkgoldenrod;">

<div id="div1">hello</div>
<div id="div2">hello2</div>

const x = (el, options = {}) => {
  console.log(this);
  console.log(el);
  console.log(options);

  el.style.background = options.color;
}

//x.bind(null, document.getElementById('div1'), {"color" : "orange"})();

const elements = [document.getElementById('div1'), document.getElementById('div2')];
const colors = ['orange', 'green'];

let length_e;

if(elements.length === colors.length) {
  length_e = elements.length;
} else {
  length_e = 0;
}

for(let i=0;i<length_e;i++) {
  x(elements[i], {"color" : colors[i]});
}