Почему анимационная рамка не работает?

Я пытался проверить простую анимационную рамку, и до сих пор мне не удалось заставить ее работать. Я хочу переместить тэг AAA по экрану вправо.Почему анимационная рамка не работает?

Как я могу анимировать его, чтобы при загрузке страницы она медленно перемещалась вправо по экрану? Я новичок в requestAnimationFrame.

Sub Вопрос: вам не нужно было бы использовать какой-либо requestAnimationFrame, но не могли бы вы просто использовать JavaScript-код для перемещения объекта по экрану.

HTML код:

<html> 
<body> 
    <!-- <script language="javascript" SRC="poker.js"></script>--> 
    <div id="test">AAA</div> 
    <script> 
    window.requestAnimationFrame = window.requestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.oRequestAnimationFrame; 


    var start = null; 

    var d = document.getElementById("test"); 

    function step(timestamp) { 
     var progress; 

     if (start === null) { 
     start = timestamp; 
     } 

     progress = timestamp - start; 

     d.style.left = Math.min(progress/10, 200) + "px"; 

     if (progress < 2000) { 
     requestAnimationFrame(step); 
     } 
    } 

    requestAnimationFrame(step); 
</script> 
</body> 
</html>

источник

2014-08-29 Anonymous

вы не сможете переместить 'div' если он не имеет стиля «абсолютной» позиции или аналогичного. – akonsu

Paul Irish имеет отличную статью об использовании 'requestAnimationFrame', включая надежный полиполк и примеры того, как начать работу: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ – Jasper

можете ли вы добавить CSS пожалуйста? –

Вы не можете перемещать static элементы, расположенные с left, right, top или bottom свойствами. Вы должны дать #test позицию absolute, relative или fixed, чтобы заставить его работать:

#test{ 
    position: relative; 
}

left, right, top и bottom свойства работают только для позиционированных элементов. По умолчанию элемент имеет position: static;

Рабочий образец: http://jsfiddle.net/carloscalla/t4ynnpbo/

UPDATE

Как я объяснил в комментариях, вы могли бы использовать transition CSS свойства для достижения того же.

Ваш CSS будет:

#test2{ 
    position: relative; 
    -webkit-transition: all 2s linear; 
    -moz-transition: all 2s linear; 
    -o-transition: all 2s linear; 
    -ms-transition: all 2s linear; 
    transition: all 2s linear; 
    left: 0; 
}

И только одна строка кода JS:

document.getElementById("test2").setAttribute('style', 'left: 200px');

Работа образца: http://jsfiddle.net/carloscalla/t4ynnpbo/1/

источник

2014-08-29 16:59:04

Но вы могли бы сделать то же самое, если бы анимационная рамка была правильной? – 2014-08-29 17:59:59

@ user3376708 да, это правильно, вы можете использовать свойство CSS 'перехода' для элемента, который хотите анимировать, и просто изменить JS-значение' left', 'top',' right' или 'bottom' CSS, и он будет анимировать слишком. Поскольку я вижу, что вы используете vainilla JS, а не jQuery, я не советовал использовать метод '.animate()' jQuery, но вы также можете использовать это. –

@ user3376708 см. Обновление для рабочей выборки с использованием свойства CSS перехода. Вы можете сделать это также с помощью метода '.animate()' jQuery, но поскольку я вижу, что вы используете vanilla JS, я не включил jQuery в свой ответ –

Почему анимационная рамка не работает?

ответ

Смежные вопросы