Обновление анимации-продолжительности в Javascript

Question

После изменения animation-duration (или в данном случае -webkit-animation-duration) недвижимости с помощью JavaScript с setProperty("-webkit-animation-duration", value + "s"), я вижу изменение в инспекторе элементов в Chrome, но фактическая скорость анимации не изменяется. Кроме того, если я вручную изменю значение в инспекторе элементов, изменений также не будет.

У меня есть поле ввода установки, чтобы взять значение скорости анимации, которая связана со следующим прослушивателя событий (orbitFactor глобальная переменная определена в другом месте):

function updateSpeed(event) { 
    var planetDiv = document.getElementById(event.target.id); 
    planetDiv.style.setProperty("width", event.target.value/orbitFactor); 
    planetDiv.style.setProperty("height", event.target.value/orbitFactor); 
    planetDiv.style.setProperty("-webkit-animation-duration", event.target.value + "s"); 
} 

Слушатель событие, безусловно, получение вызова, а значение -webkit-animation-duration меняется в инспекторе элементов, но скорость анимации не изменяется. Есть ли что-то, что мне не хватает в отношении -webkit-animation-duration? Другие свойства, которые я изменяю (например, width и height), используя тот же метод, заметно меняются.

Заранее спасибо

EDIT: Обратите внимание, что это проблема в Chrome 40, но он работает должным образом в Chrome 42 и Firefox 35.

Answer 1

Установка элемент стиль непосредственно с помощью [] для доступа либо поставщик префикса или родной CSS пропеллера. позволит вам повторно применить свойство продолжительности анимации и изменить скорость вращения планеты. Нет необходимости в jQuery. Также стоит упомянуть, что на момент написания Firefox поддерживает не префиксную версию свойства css, в то время как для других браузеров существует либо смешанная поддержка, либо поддержка префикса поставщика. Если вы планируете использовать эти анимации, данный разработчик должен серьезно подумать о своей потенциальной базе пользователей и, возможно, , а не, сделать это основной функцией веб-приложения. Смотрите подробнее здесь поддержку:

http://caniuse.com/#feat=css-animation

Le код:

orbitFactor = 1e6 

function updateSpeed(event) { 
    var orbitDiv = document.getElementById("Mercury-orbit"); 
    orbitDiv.style["-webkit-animation-duration"] = event.target.value + "s"; 
} 

function updateDiameter(event) { 
    var planetDiv = document.getElementById("Mercury"); 
    planetDiv.style["width"] = event.target.value + "px"; 
    planetDiv.style["height"] = event.target.value + "px"; 
} 

document.getElementById("orbit-period").addEventListener("change", updateSpeed); 
document.getElementById("planet-diameter").addEventListener("change", updateDiameter); 

Answer 2

Это не просто перезапустить CSS анимацию или изменить его параметры. Однако я нашел трюк. См. Следующий код. Я разделил параметры анимации на класс, который я добавляю/удаляю. Плюс трюк нашел в CSS-Tricks article, и она работает:

$(document).ready(function() { 
 
    $('#slow-btn').click(function(){ 
 
    $('#testdiv').removeClass("testanimation"); 
 
    $('#testdiv').css("-webkit-animation-duration", "5s"); 
 
    $('#testdiv').get(0).offsetWidth = $('#testdiv').get(0).offsetWidth; 
 
    $('#testdiv').addClass("testanimation"); 
 
    }); 
 
    $('#fast-btn').click(function(){ 
 
    $('#testdiv').removeClass("testanimation"); 
 
    $('#testdiv').css("-webkit-animation-duration", "1s"); 
 
    $('#testdiv').get(0).offsetWidth = $('#testdiv').get(0).offsetWidth; 
 
    $('#testdiv').addClass("testanimation"); 
 
    }); 
 
});

#testdiv { 
 
    display: block; 
 
    position: absolute; 
 
    left: 100px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
} 
 
.testanimation { 
 
    -webkit-animation: myanimation 2s linear alternate infinite; 
 
    animation: myanimation 2s linear alternate infinite; 
 
} 
 
@-webkit-keyframes myanimation { 
 
    from {left: 100px;} 
 
    to {left: 400px;} 
 
} 
 
@keyframes myanimation { 
 
    from {left: 100px;} 
 
    to {left: 400px;} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='testdiv' class='testanimation'></div> 
 
<input id='slow-btn' type='button' value='slow' /> 
 
<input id='fast-btn' type='button' value='fast' />

Answer 3

в w3c стандарте, он говорит, что он не упоминает, мы можем изменить время продолжительности анимации или нет. так что все зависит от explorer.chrome да, но нет. Итак, мы должны обновить всю анимацию, когда хотим изменить время.

var animation = 'animationName time linear infinite'; var $element= $('selector').css('animation', 'none'); setTimeout(function(){ $element.css('animation', animation); }); эту работу на IE