Как преобразовать функцию анимации jQuery в чистый JS

У меня есть эта простая логика jquery. Как мне преобразовать ее в чистый javascript?

Кроме того, я должен использовать этот код в React с Typescript.

Я понятия не имею, с чего начать, к сожалению. Любая помощь будет чрезвычайно признательна.


$('.counting').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count');
  
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {
    duration: 3000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }
  });  
});

Я преобразовал это до запуска функции анимации.

let counting = document.querySelectorAll(".counting");
let countingArray = Array.prototype.slice.call(counting);

countingArray.forEach((el) => {
  let   countTo = el.getAttribute("data-count");

//start animate...

Я сослался на этот код в https://codepen.io/shvvffle/pen/JRALqG

javascript jquery css

10.12.2020 04:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 135

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Функция анимации для вас:

function animate(render, from, to, duration, timeFx) {
  let startTime = performance.now();
  requestAnimationFrame(function step(time) {
    let pTime = (time - startTime) / duration;
    if (pTime > 1) pTime = 1;
    render(from + (to - from) * timeFx(pTime));
    if (pTime < 1) {
      requestAnimationFrame(step);
    }
  });
}

render — функция обратного вызова, с помощью которой вы ожидаете обновить новые значения;
from и to — начальные значения и целевые значения вашей анимации;
duration — продолжительность анимации во времени в миллисекундах;
timeFx — временная функция от [0, 1] до [0, 1].

Вы можете использовать его как:

countingArray.forEach((el) => {
  let countTo = el.getAttribute("data-count");
    animate(function(newValue) {
        el.innerText = Math.floor(newValue);
    }, 0, countTo, 3000, x => x);
});

боже мой!!! Оно работает!!!! спасибо большое!!!! :))

— 10.12.2020 08:27

10.12.2020 05:45