이 간단한 jquery 논리가 있습니다. 어떻게 순수한 자바 스크립트로 변환합니까?
게다가 Typescript와 함께 React에서이 코드를 사용해야합니다.
안타깝게도 어디서부터 시작해야할지 모르겠습니다. 어떤 도움이라도 대단히 감사하겠습니다.
$('.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...
당신을위한 애니메이션 기능 :
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);
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다