Синтаксис перехода webkit в javascript?

Я ищу ссылку на объект webkitTransition здесь

 function spawnAnimation(what){
    //sets the moving element
    var moveingEl = document.getElementById(what);
    //gives temp transition property
    moveingEl.style.WebkitTransition = "left 2s";
   // moveingEl.style.webkitTransition = "top 500ms";

   var cLeft = moveingEl.style.left
   var cleft = Number(cLeft.slice(0, -2));

    var cTop = moveingEl.style.top
   var cTop = Number(cTop.slice(0, -2));

   moveingEl.style.left = cLeft+200 + "px";

}

Это не работает. Я хотел бы дать элементу свойство перехода, а затем заставить его двигаться вправо. Когда этот код вызывается, он сразу же перемещается вправо без анимации. облом :(. Я не хочу предопределять его в CSS, я хотел бы динамически добавить его, а затем удалить.


javascript css css-transitions webkit
person Philll_t    schedule 14.09.2011    source источник

Ответы (4)


arrow_upward
6
arrow_downward

Вы можете использовать style.setProperty для изменения любого свойства. используя свое имя CSS в виде строки, включая свойства -moz-* и -webkit-*.

const style =  document.getElementById('my-div').style
const prop = (k, v) => style.setProperty(k, v)

function bounce() {
  prop("-webkit-transition", "top .5s ease-in");
  prop("top", "50px");
  setTimeout(() => {
    prop("-webkit-transition", "top .75s cubic-bezier(0.390, 0.575, 0.565, 1.000)");
    prop("top", "0px");
  }, .5 * 1000)
}

prop("-webkit-transition", "top .5s ease-in");
setInterval(bounce, (.75 + .5) * 1000);
#my-div {
  background: red;
  border-radius: 50%;
  width:50px;
  height:50px;
  position:absolute;
  top: 0px;  
}
<div id="my-div"></div>

person kbtz    schedule 14.09.2011
comment
Это был не я, чувак. Не думайте, что я проголосовал за него только из-за этого комментария. Я ценю вашу помощь и проголосовал, чтобы противостоять этому негативу и выразить свою признательность. - person Philll_t; 06.10.2011

arrow_upward
2
arrow_downward

Разрешить 1 мс для рендеринга, чтобы вернуть поток.

setTimeout(function() {
    myElement.style.height = '200px'; /* or whatever css changes you want to do */
}, 1);​
person thomas-peter    schedule 26.07.2012
comment
Это отлично сработало для меня, когда я пытался анимировать преобразование с переходом. Спасибо. - person iHiD; 26.03.2013
comment
Это не надежное решение. Вместо этого вы должны использовать window.requestAnimationFrame. - person Petr Fiedler; 04.03.2021

arrow_upward
1
arrow_downward

Вы можете использовать:

element.style.webkitTransition = "set your transition up here"

person hallodom    schedule 11.06.2013

arrow_upward
0
arrow_downward

Я знаю, что это обходной путь, но можете ли вы использовать jQuery?

$(moveingEl).css('-webkit-transform', 'translateX(200px)');
person captainclam    schedule 20.09.2011