Активировать css анимацию/перевод с помощью javascript

Question

Я пытаюсь получить анимацию javascript и использовать анимацию CSS вместо этого. В настоящее время я использую функции анимации jQuery.

Я наткнулся на this сайт с кучей замечательных анимаций css. Такие как:

.demo1 { 
    -webkit-transition:all .5s ease-out; 
    -moz-transition:all .5s ease-out; 
    -ms-transition:all .5s ease-out; 
    -o-transition:all .5s ease-out; 
    transition:all .5s ease-out; 
} 

.demo1:hover { 
    -webkit-transform:translate(0px,10px); 
    -moz-transform:translate(0px,-10px); 
    -ms-transform:translate(0px,-10px); 
    -o-transform:translate(0px,10px); 
    transform:translate(0px,-10px); 
} 

Я не могу понять, как программно активировать эти анимации. Так, например, вместо hover, как я могу перевести элемент, вызвав elem.translate()?

Answer 1

Я может быть искажая то, что вы просите, но я думаю, что вы можете быть под ошибочным впечатлением от того, что «переводить» находится на элемент. Элемент DOM имеет атрибут «translate», а также свойство css «translate». Однако атрибут элемента "translate" is just a boolean flag specifying whether the text in the element should be translated in the linguistic sense, он не является вызываемой функцией и не имеет ничего общего с свойством css.

В стороне, все еще есть много способов перевести элемент программно. Некоторые другие люди уже дали довольно хорошее представление о том, как это сделать с помощью jQuery. Если вы не хотите использовать jQuery, вы можете добавлять и удалять классы вручную (то же самое касается стилей).

---

Here's an example Я приготовил для класса дополнение/снят. Это довольно просто, но вот соответствующий код класса модификации:

.translator { 
    -webkit-transform:translate(0px,100px); 
    -moz-transform:translate(0px,-100px); 
    -ms-transform:translate(0px,-100px); 
    -o-transform:translate(0px,100px); 
    transform:translate(0px,-100px); 
} 
... 
function move_box() { 
    var the_box = document.getElementById("the-box"); 
    if (the_box.classList.contains("translator")) { 
    the_box.classList.remove("translator"); 
    } else { 
    the_box.classList.add("translator"); 
    } 
} 

Применяя класс, анимация начнется (и удаление будет повернуть его вспять). Это может произойти столько раз, сколько вы захотите.

Одно важное замечание: для этого примера у меня все еще есть стиль «переход: все .5s ease-out»; применяется к div, прежде чем что-либо произойдет. Это просто универсальное умолчание, которое определяет, как эффекты анимации применяются к элементу. Есть несколько разных подходов к этому, но ради простоты я собираюсь просто оставить это так.

В противном случае, вы можете add the styles directly, like so:

function move_box() { 
    var the_box = document.getElementById("the-box"); 
    set_translate(the_box, 100); 
} 

function set_translate(e, pix) { 
    e.style["-webkit-transform"] = "translate(0px, "+ pix +"px)"; 
    e.style["-moz-transform"] = "translate(0px, -" + pix +"px)"; 
    e.style["-ms-transform"] = "translate(0px, -" + pix + "px)"; 
    e.style["-o-transform"] = "translate(0px, " + pix + "px)"; 
    e.style["transform"] = "translate(0px, -" + pix + "px)"; 
} 

Ничего слишком сложного здесь - он устанавливает каждый соответствующий элемент непосредственно манипулируя стили на элементе. Как и прежде, он полагается на отдельный класс, чтобы указать стиль перехода.

---

Лично я считаю, что добавление/удаление класса намного превосходит. С технической точки зрения, прямая модификация стилей более гибкая, но если это то, к чему вы стремитесь, вероятно, следует использовать хорошую библиотеку, такую ​​как переход jQuery (как упоминается в комментариях).Однако, если вы просто хотите, чтобы программно применяли несколько консервированных эффектов, изменение классов на лету - прекрасное решение.

Answer 2

Если у вас уже есть CSS на месте, вы можете запустить его в JQuery, делая $('.demo1').trigger('hover'); имитировать событие парения или изменить селектор CSS от .demo:hover к .class-name и просто добавить этот класс, используя $('.demo').addClass('class-name');

Answer 3

Вы можете используйте jQuery.css.fn, чтобы применить правила css.

$('.demo1').click(function(){ 
    $(this).css({ 
     transform: 'translate(0px,-10px)' 
    }); 
}); 

Или добавить класс к элементу:

$('.demo1').click(function(){ 
    $(this).toggleClass('translate'); 
}); 


.translate { 
    -webkit-transform:translate(0px,10px); 
    -moz-transform:translate(0px,-10px); 
    -ms-transform:translate(0px,-10px); 
    -o-transform:translate(0px,10px); 
    transform:translate(0px,-10px); 
}