Question

我正试图摆脱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);
}

我无法弄清楚如何以编程方式激活这些动画。例如，我可以通过调用hover来翻译元素，而不是elem.translate()。

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

通过应用该类，动画将开始（并且移除它将使其反转）。这种情况可能会发生很多次。

一个重要的注意事项：对于这个例子，我仍然有“过渡：所有.5s缓出”的风格。在任何事情发生之前应用于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中文这样的好库（如评论中所述）。但是，如果您只是希望能够以编程方式应用一些预制效果，则动态修改类是一个很好的解决方案。

Answer 2

如果您已经安装了CSS，可以通过$('.demo1').trigger('hover');模拟悬停事件，或者将您的css选择器从.demo:hover更改为.class-name，然后在jquery中触发它使用$('.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);
}

使用javascript激活css动画/翻译

3 个答案: