使用 javascript 激活 css 动画/翻译答案

【问题标题】：Activate css animation/translation with javascript使用 javascript 激活 css 动画/翻译
【发布时间】：2013-02-13 05:50:52
【问题描述】：

我正在尝试摆脱 javascript 动画并改用 CSS 动画。我目前正在使用 jQuery 的动画功能。

我遇到了 this 网站，里面有很多很棒的 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？

【问题讨论】：

看来这是你需要的：ricostacruz.com/jquery.transit
完美。人们需要了解它。也许把它作为答案？

标签： javascript css css-animations

【解决方案1】：

我可能误解了您的要求，但我认为您可能对元素上的“翻译”有错误的印象。 DOM 元素有一个名为“translate”的属性，以及一个 css 属性“translate”。但是，元素属性"translate" is just a boolean flag specifying whether the text in the element should be translated in the linguistic sense，它不是可调用函数，与css属性无关。

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

Here's an example我为课程添加/删除做好了准备。这很简单，但这里是类修改的相关代码：

.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 .5s ease-out;”在发生任何事情之前应用于 div。这只是一个通用的默认值，它控制动画效果如何应用于元素。有几种不同的方法可以解决这个问题，但为了简单起见，我将保持这样的状态。

否则你可以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)";
}

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

就个人而言，我认为添加/删除类要好得多。从技术上讲，直接修改样式更灵活，但如果这是您的目标，您可能应该使用像 jQuery transit 这样的好库（如 cmets 中所述）。但是，如果您只是希望能够以编程方式应用一些预设效果，那么动态修改类是一个很好的解决方案。

【讨论】：

【解决方案2】：

如果你已经有了 CSS，你可以在 jquery 中通过 $('.demo1').trigger('hover'); 触发它来模拟悬停事件，或者将你的 css 选择器从 .demo:hover 更改为 .class-name 并使用 @987654324 添加该类@

【讨论】：

【解决方案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);
}

【讨论】：