2015-10-05 4 views
4

Я сдаюсь. Как определить скорость. Ни один из примеров не показывает это и правильно; это должно быть легко. Я пытаюсь использовать версию скорости 1.2.3 без JQuery (выпущенную девять дней назад в соответствии с GitHub). Я получил первую версию (более раннюю, 1.2.2) путем прямой загрузки с GitHub на мою веб-страницу, а затем сохранил мою веб-страницу как speed.js. Второй был получен путем перехода к https://github.com/julianshapiro/velocity, доступа к speed.js и сохранения его как Velocity123.js.Скорость не определена

Эта тестовая программа должна помочь мне начать работу со скоростью, но я пока не могу ее получить из-за неопределенной ситуации Velocity, о которой сообщает webdeveloper/webconsole FireFox v 40.0.3. Другой экземпляр часто задаваемых значений Velocity, по-видимому, не применяется, поскольку он использует устаревшую версию JQuery. В speed1.2.3 я видел фактическое определение Velocity, и я получил файл. Я проверил определение файла, скопировав его и DIR-ing в оболочке после изменения/на \, так как его нельзя определить? Тест-код:

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Test1 Velocity</title> 
     <meta charset="utf-8"/> 
     <!-- Standard download from GitHub 
      <script src="C:/Users/dbd/Documents/Library4thFloor/velocity.js"> 
      </script> 
     --> 
     <!-- Suggested by wikipedia 
      <script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"> 
      </script> 
     --> 
     <!-- manually included from github latest --> 
     <script src="C:/Users/dbd/Documents/Library4thFloor/Velocity123.js"> 
     </script> 
     <script type="text/JavaScript"> 
      function press(){ 
      alert("entered press"); 
      var idrect = document.getElementById("sq"); 
      alert("after idrect is set"); 
      Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5}); 
      return false; 
      } 
     </script> 
    </head> 
    <body> 
     <h1>Sample SVG with Velocity</h1> 
     <br> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400"> 
     <rect id="sq" 
       x="25" 
       y="25" 
       width="200" 
       height="200" 
       fill="lime" 
       stroke-width="4" 
       stroke="pink" 
       onclick="press()" 
     /> 
     </svg> 
    </body> 
    </html> 

ответ

2

Быстрое чтение документации velocity.js показывает, что вы делаете неправильно. Velocity используется как другие методы jQuery.

Например, если вы хотите, чтобы сделать div красный, то синий с 1000ms в анимации:

$('div') 
    .velocity({ backgroundColor: 'red' }, 1000) 
    .velocity({ backgroundColor: 'blue' }, 1000) 
+0

Согласно моему чтению, форма, которую вы цитируете, предназначена только для использования с JQuery. Без JQuery форма, согласно документации, изменяется на: –

+0

Извините, я еще не уверен в переполнении стека: он прервал меня в середине потока. Как я уже говорил, для использования без JQuery форма изменяется на: Velocity (. {: }, {duration: ... и т. Д. Спасибо за попытку. –

+0

Я обнаружил, что предоставленный код работает нормально в Chrome, но не под IE или FireFox. Это меняет вопрос о том, как он может работать под FireFox. Где-то в документации, он утверждает, что Velocity не зависит от браузера, должны добавляться к учету для разных браузеров, предположительно не требуются со скоростью.Это, похоже, противоречит этому, но я ожидаю, что все станет ясно, как только он начнет работать повсюду. –

0

Я использую Firefox, и этот код работает с Velocity 2.1.3:

Velocity(document.getElementById('elementId'), {property: 'value'}, time); 
0

Я протестировал ваш код в Firefox, хотя с velocity.js с CDN, и он сработал. Несмотря на неопределенные ошибки, вы можете даже не увидеть свою анимацию, поскольку вы установили duration в 2 мс. Попробуйте установить его на 2000 мс.

Обратите внимание, что в HTML 5 вам больше не нужно указывать атрибут сценария text/javascript. Кроме того, он не написан с помощью капитала J. Попробуйте удалить атрибут и посмотреть, что произойдет.

0

Try: jQuery.Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5});

вместо: Velocity(idrect, {opacity:0.3},{duration:2,easing:"ease-in-out",loop:5});

Я пытался имитировать ступенчатое воздействие на этой странице (https://vuejs.org/v2/guide/transitions.html#Staggering-List-Transitions) и выдерживают удары же Velocity is undefined ошибку. Зависимости скорости (http://velocityjs.org/#dependencies) указывает без присутствия jQuery, $.Velocity now becomes Velocity. Так что с jQuery present, я отменил его, и он работает.

Fwiw: для моего приложения Я использую Vue для некоторых частей, но jQuery присутствует для других прослушивателей событий и анимаций на странице, поэтому я столкнулся с этой проблемой.