使用javascript激活css动画/翻译

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

我不知道如何通过编程激活这些动画。例如，我如何通过调用elem.translate()来翻译元素，而不是在hover上？

Answer 1

我可能误解了你的要求，但我认为你可能对元素上的"translate"有错误的印象。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");
  }
}

通过应用类，动画将开始（移除它将反转它）。这种情况可以发生任意多次。

一个重要的注意事项是：对于这个例子，在发生任何事情之前，我仍然将样式"transition:all.5ssease-out；"应用于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);
}