使用javascript激活css动画/翻译 [英] Activate css animation/translation with javascript

问题描述

我试图离开javascript动画，使用CSS动画。我目前正在使用jQuery的动画功能。

I am trying to get off javascript animations and use CSS animations instead. I am currently using jQuery's animation functionality.

我遇到了这个网站有一堆精彩的CSS动画。例如：

I came across this website with a bunch of wonderful css animations. Such as:

.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（）翻译元素？

What I can't figure out is how to activate these animations programmatically. So for example, instead of on a hover, how can I translate the element by calling elem.translate()?

推荐答案

我可能误解你的问题，但我认为你可能会错误地认为是在一个元素。 DOM元素具有称为translate的属性，以及css属性translate。但是，元素属性translate 只是一个布尔标志，指定元素中的文本是否应该在语言意义上翻译，它不是一个可调用函数，与css属性无关。

I may be misinterpreting what you're asking, but I think you may be under a mistaken impression of what "translate" is on an element. A DOM element has an attribute called "translate", as well as a css property "translate". However, the element attribute "translate" is just a boolean flag specifying whether the text in the element should be translated in the linguistic sense, it is not a callable function and has nothing to do with the css property.

除此之外，还有很多方法可以通过编程方式翻译元素。一些其他人已经给了一个很好的想法如何用jQuery做到这一点。如果你不想使用jQuery，你仍然可以手动添加和删除类（同样适用于样式）。

That aside, there are still plenty of ways to translate an element programmatically. Some other people already gave a pretty good idea of how to do this with jQuery. If you don't wish to use jQuery, you can still add and remove classes manually (same goes for styles).

这里是一个例子我为了添加/删除课堂而做的。这很简单，但这里是类修改的相关代码：

Here's an example I cooked up for class addition/removal. It's pretty straightforward, but here's the relevant code for class modification:

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

通过应用类，动画将开始删除它会逆转它）。

By applying the class, the animation will begin (and removing it will reverse it). This can happen as many times as you'd like.

一个重要的注意事项：在这个例子中，我仍然有transition：all .5s ease-out; 。在任何事情发生之前应用于div。这只是一个通用的默认值，控制动画效果如何应用到元素。这有几种不同的方法，但是为了简单起见，我要这样离开。

One important note: for this example, I still have the style "transition:all .5s ease-out;" applied to the div before anything happens. This is just a universal default that governs how animation effects are applied to the element. There are a couple of different approaches to this, but for simplicities sake I'm going to just leave it like this.

否则，你可以直接添加样式，如此：

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

这里没有太复杂的东西 - 直接通过操作样式来设置每个相关元素元素。和以前一样，它依赖于一个单独的类来指定过渡风格。

Nothing too complex here - it sets each relevant element directly by manipulating the styles on the element. As before, it relies on a separate class to specify the transition style.

我个人认为类的添加/删除是远远优越的。从技术上讲，直接修改样式更灵活，但如果这是你的目标，你可能应该使用一个好的库，如jQuery过境（如评论中提到的）。但是，如果你只是想以编程方式应用几个罐头效果，在飞行中修改类是一个很好的解决方案。

Personally, I think the class addition/removal is far superior. Technically speaking, direct modification of styles is more flexible, but if that's what you're aiming for you probably should use a good library like jQuery transit (as mentioned in the comments). However, if you just want to be able to programmatically apply a few canned effects, modifying classes on the fly is a fine solution.

这篇关于使用javascript激活css动画/翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！