使用 javascript 激活 css 动画/翻译
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14803824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Activate css animation/translation with javascript
提问by Alexis
I am trying to get off javascript animations and use CSS animations instead. I am currently using jQuery's animation functionality.
我试图摆脱 javascript 动画并改用 CSS 动画。我目前正在使用 jQuery 的动画功能。
I came across thiswebsite with a bunch of wonderful css animations. Such as:
我在这个网站上看到了一堆精彩的 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);
}
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()?
我想不通的是如何以编程方式激活这些动画。因此，例如，hover我如何通过调用来翻译元素而不是 a elem.translate()？
回答by Bubbles
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.
我可能误解了您的要求，但我认为您可能对元素上的“翻译”有什么误解。DOM 元素有一个名为“translate”的属性，以及一个 css 属性“translate”。但是，元素属性“translate”只是一个布尔标志，指定元素中的文本是否应该在语言意义上进行翻译，它不是一个可调用的函数，与 css 属性无关。
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).
除此之外，还有很多方法可以以编程方式翻译元素。其他一些人已经对如何用 jQuery 做到这一点有了很好的想法。如果您不想使用 jQuery，您仍然可以手动添加和删除类（样式也是如此）。
Here's an exampleI 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.
通过应用类，动画将开始（删除它会反转它）。这可以根据您的需要多次发生。
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.
一个重要的注意事项：对于这个例子，我仍然使用“transition:all .5seasie-out;”样式。在发生任何事情之前应用于 div。这只是控制动画效果如何应用于元素的通用默认值。对此有几种不同的方法，但为了简单起见，我将保持原样。
Otherwise, you can 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)";
}
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.
这里没有什么太复杂的 - 它通过操纵元素上的样式直接设置每个相关元素。和以前一样，它依赖一个单独的类来指定过渡样式。
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.
就个人而言，我认为课程的添加/删除要优越得多。从技术上讲，直接修改样式更灵活，但如果这是您的目标，您可能应该使用像 jQuery 传输这样的好库（如评论中所述）。但是，如果您只是希望能够以编程方式应用一些预设效果，那么动态修改类是一个很好的解决方案。
回答by ozk
If you already have the CSS in place, you can trigger it in jquery by doing $('.demo1').trigger('hover');to simulate a hover event, or change your css selector from .demo:hoverto .class-nameand just add that class using $('.demo').addClass('class-name');
如果您已经有了 CSS，您可以通过$('.demo1').trigger('hover');模拟悬停事件在 jquery 中触发它，或者将您的 css 选择器从 更改.demo:hover为.class-name并使用添加该类$('.demo').addClass('class-name');
回答by yckart
You can use jQuery.css.fnto apply the css rules.
您可以使用jQuery.css.fn来应用 css 规则。
$('.demo1').click(function(){
$(this).css({
transform: 'translate(0px,-10px)'
});
});
Or add a class to the element:
或者给元素添加一个类：
$('.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);
}
