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

Question

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

Я наткнулся на этот сайт с кучей замечательных анимаций 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" - это просто логический флаг, указывающий, должен ли текст в элементе переводиться в лингвистическом смысле, это не вызываемая функция и не имеет ничего общего со свойством css.

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

---

Вот пример, который я приготовил для добавления / удаления класса. Это довольно просто, но вот соответствующий код для модификации класса:

.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 замедление"; применяется к div, прежде чем что-то случится. Это просто универсальное значение по умолчанию, которое определяет, как эффекты анимации применяются к элементу. Есть несколько разных подходов к этому, но для простоты я просто оставлю это так.

В противном случае вы можете добавить стили напрямую, например так:

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 Transit (как упомянуто в комментариях). Однако, если вы просто хотите иметь возможность программно применять несколько стандартных эффектов, изменение классов на лету - прекрасное решение.

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);
}