3

我正在尝试摆脱 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我如何通过调用而不是 on a 来翻译元素elem.translate()？

4

3 回答 3

7

我可能误解了您的要求，但我认为您可能对元素上的“翻译”有错误的印象。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");
  }
}

通过应用该类，动画将开始（删除它会反转它）。这可以发生任意多次。

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

于 2013-02-11T01:07:18.077 回答
2

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

于 2013-02-10T23:33:21.630 回答
0

您可以使用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);
}
于 2013-02-10T23:34:34.087 回答