CSS-анимация работает только один раз

Question

Я начинаю анимацию CSS с использованием следующего кода JavaScript (element является div, name - это имя существующего правила, destination - это элемент, в который должен перемещаться элемент). При первом вызове этой функции он работает по назначению (div мягко перемещается в конечный пункт назначения). Во второй раз он просто переходит к месту назначения (потому что я явно установил left и top), но никакого движения не происходит. Если я установил точку останова в строке, где происходит присвоение имени (webkitAnimationName), анимация выполняется так же, как и в первый раз. Мне нужна задержка?

function flyTo(element, name, destination) { 
    var rule = findKeyframesRule(name); 
    if (rule != null) { 
    element.style.webkitAnimationName = "none"; 

    // remove the existing 0% and 100% rules 
    rule.deleteRule("from"); 
    rule.deleteRule("to"); 

    // create new 0% and 100% rules 
    rule.insertRule("from {top: " + element.style.top + "; left: " + element.style.left + ";}"); 
    rule.insertRule("to {top: " + px(destination.y) + "; left: " + px(destination.x) + ";}"); 

    // assign the animation to our element (which will cause the animation to run) 
    element.style.left = px(destination.x); 
    element.style.top = px(destination.y); 
    element.style.webkitAnimationDuration = "1s"; 
    element.style.webkitAnimationTimingFunction = "linear"; 
    element.style.webkitAnimationName = name; 
    } else { 
    element.style.left = px(destination.x); 
    element.style.top = px(destination.y); 
    } 
} 

Я использую Google Chrome

Answer 1

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

#tag-menu { top: 0px; width: 270px; height: 100%; left: -370px; background: #2F535C; z-index: 9; box-shadow: 5px 5px 10px 0px rgba(84,84,84,0.25); position: fixed; display: block; transition: left 0.25s ease-out; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transform: translateX(-317px); -moz-transform: translateX(-317px); -o-transform: translateX(-317px); -ms-transform: translateX(-317px); } #tag-menu.active{ left:0; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform:translateX(0px); transition:all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; } А то и просто добавлять и удалять «активный» класс. Меню будет скользить. Надеюсь, я могу вам помочь. Cheers