Javascript работает над Safari, но не в любом другом браузере

Я использую requestAnimationFrame в Javascript для перемещения html div, изменив его свойства «сверху» и «слева» CSS. Он отлично работает на Safari 7.1.2, но div не двигается немного в Firefox, Chrome или Opera.Javascript работает над Safari, но не в любом другом браузере

Сумасшедшая вещь заключается в том, что в Chrome и Opera, если вы перетаскиваете угол окна (пытаясь изменить его размер), то div начинает двигаться ... и затем немедленно останавливается, когда вы отпускаете мышь из угол.

Вот исходный код:

<!DOCTYPE html> 

<head> 
    <meta charset="utf-8"/> 
    <title>exp_2</title> 
    <link rel="stylesheet" type="text/css" href="exp_1.css"> 
</head> 

<body> 
    <div class="box_out" id="b1"><p id="menu_text">gallery</p></div> 

    <script type="text/javascript"> 
     var middle = document.querySelector("body").clientWidth/2 - 50; 
     window.addEventListener("resize", function() { 
      middle = document.querySelector("body").clientWidth/2 - 50; 
     }); 

     var div = document.getElementById("b1"); 
     var angle = 0, lastTime = null; 
     function animate(time) 
     { 
      if (lastTime != null) 
       angle += (time - lastTime) * 0.0002; 
      lastTime = time; 
      div.style.top = (150 + Math.sin(angle) * 100) + "px"; 
      div.style.left = (middle + Math.cos(angle) * 100) + "px"; 
      requestAnimationFrame(animate); 
     } 
     requestAnimationFrame(animate); 
    </script> 
</body> 
</html>

и вот CSS class и id s Я с помощью:

body 
{ 
    text-align: center; 
    background-color: #232323; 
    color: white; 
} 

#menu_text 
{ 
    font-family: Trebuchet MS, Helvetica, Arial; 
    font-size: 1.5em; 
    padding-top: 2em; 
} 

.box_out 
{ 
    box-shadow: 2px 4px 15px black; 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
    text-align: center; 
    width: 6em; 
    height: 6em; 
    background-color: #663300; 
    -webkit-transition: 0.1s ease-out; 
    -moz-transition: 0.1s ease-out; 
    -o-transition: 0.1s ease-out; 
} 

.box_out:hover 
{ 
    -webkit-transform: scale(1.4); 
    -moz-transform: scale(1.4); 
    -o-transform: scale(1.4); 
    -ms-transform: scale(1.4); 
}

ли requestAnimationFrame проблема или есть некоторые проблемы совместимости с моим CSS ? Я даже попробовал оставить слушателя событий для clientWidth, но проблема здесь не в этом.

источник

2015-02-06 Giorgio

http://caniuse.com/#feat=requestanimationframe – Timmerz

HTTP : //jsfiddle.net/93704tw2/, похоже, отлично работает для меня – Timmerz

Проблема является ваш переход CSS является причиной его не запускать:

-webkit-transition: 0.1s ease-out; 
-moz-transition: 0.1s ease-out; 
-o-transition: 0.1s ease-out;

http://jsfiddle.net/xs40d7dd/

Я не знаком с requestAnimationFrame, но я предполагаю, что это альтернативный способ перехода (через JS в вместо CSS). Если вы хотите использовать CSS transition, я бы рекомендовал просто установить верхний/левый без использования requestAnimationFrame.

источник

2015-02-06 22:31:29 Timmerz

Да, я думаю, что это настоящая проблема; возиться с кодом обработки кадров не имело для меня никакого смысла. – Pointy

Да, я бы поставил, что css противоречит методу js – Timmerz

Он работает лучше в Firefox, если вы запустите его на каждой другой кадр анимации:

var div = document.getElementById("b1"); 
    var angle = 0, lastTime = null, toggle = false; 
    function animate(time) 
    { 
     toggle = !toggle; 
     if (!toggle) { 
      var oldangle = angle; 
      if (lastTime != null) 
      angle += (time - lastTime) * 0.0002; 
      lastTime = time; 
      div.style.top = (150 + Math.sin(angle) * 100) + "px"; 
      div.style.left = (middle + Math.cos(angle) * 100) + "px"; 
     } 
     requestAnimationFrame(animate); 
    } 
    requestAnimationFrame(animate);

источник

2015-02-06 22:26:11 Pointy

Вы правы, это работает! Но не могли бы вы объяснить мне связь между используемой переменной «toggle» и RequestAnimationFrame? Спасибо. – Giorgio

@George хорошо я просто экспериментировал, пытаясь понять, почему последовательные анимационные рамки, похоже, ничего не делают. Это был просто эксперимент; переход CSS, похоже, был реальной проблемой. – Pointy

Полезный инструмент забыть о префиксы:
https://leaverou.github.io/prefixfree/

Очень полезно, просто вызовите скрипт, нет необходимости в -o -moz -webkit

источник

2015-02-06 23:09:01

Javascript работает над Safari, но не в любом другом браузере

ответ

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