Добрый день. Использую библиотеку alpine.js, и хотел сделать плавное увеличение значения в теге <progress> при появлении элемента в области просмотра. Запуск анимации реализовал через IntersectionObserver. Прошу помощи с плавным увеличением значения, если возможно вместо setTimeout на requestAnimationFrame:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Progress</title>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script>
document.addEventListener( 'alpine:init', () => {
Alpine.data( 'progress', ( to, time, wait ) => ( {
init() {
let elem = this.$el;
const observer = new IntersectionObserver( ( entries, imgObserver ) => {
entries.forEach( ( entry ) => {
console.log( entry );
if ( entry.isIntersecting ) {
var target = entry.target,
delay = parseInt( wait ) || 100,
duration = parseInt( time ) || 2000;
if ( entry.intersectionRatio > 0 && !target.classList.contains( 'is-active' ) ) {
target.classList.add( 'is-active' );
setTimeout( () => {
var start = new Date().getTime();
var interval = setInterval( function() {
var progress = ( ( new Date().getTime() ) - start ) / duration,
from = target.getAttribute( 'value' ) || 0,
result = Math.floor( ( to - from ) * progress + from ),
value = progress < 1 ? result : to;
console.log( value );
elem.setAttribute( 'value', value );
if ( value == to ) {
clearInterval( interval );
}
}, 10 );
}, delay );
imgObserver.unobserve( target );
}
}
} )
} );
observer.observe( elem );
}
} ) );
} )
</script>
</head>
<body>
<progress class="progress" max="100" x-data="progress(100, 2000)"></progress>
</body>
</html>
В консоли когда проверяю, сейчас значения могут так идти: 1-1-2-3-4-4-4-5-4-5-6-7-8...
