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

我无法弄清楚的是如何以编程方式激活这些动画.因此,例如,hover我可以通过调用如何翻译元素而不是a 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中文这样的好库(如评论中所述).但是,如果您只是希望能够以编程方式应用一些预制效果,则动态修改类是一个很好的解决方案.