点击翻译 div

Question

我需要让一个div在点击时移出，然后他们又回到绑定到的第二个事件中。现在，这工作得很好，但只是第一次。它需要能够在多次点击时一遍又一遍地发生。

执行此操作的方法似乎是使用 translate 但它都在 Css 上，它不喜欢点击。（我已经尝试过，但它不起作用）。 谁能指出我一个可以解释如何做的网站，或者只是帮助我自己？谢谢 编辑：好的，这是脚本...

$('li, .thumbs').on('click', function() {
        $("#myVid").css("-webkit-transform","translate(-2070px, 0px)");
                //click plays a video
//some stuff happens
$('#myVid').bind("playing", function() {
        $("#myVid").css("-webkit-transform","translate(0px, 0px)");

这才是真正与该问题相关的所有内容......**编辑：所以，我将其更改为CSS addClass removeClass这是当前的脚本

$('li, .thumbs').on('click', function() {
        $("#myVid").addClass('move');
//stuff happens
$('#myVid').bind("playing", function() {
        $("#myVid").removeClass('move');

然后是 CSS

.move {
    -webkit-transform: translateX(2000px);
}

但是当它起作用时，它会闪烁很多

Answer 1

我刚刚制作了这个 jsfiddle...希望它有所帮助。

我喜欢为需要更改的元素添加一个 CSS 类（或添加一个父元素以触发一整套更改）。

在示例中，只需将"moved"类添加和删除到我的div，它将调整必要的空间。

http://jsfiddle.net/fvgaK/5/

[编辑：更新以使其兼容]

Answer 2

你可以

使用CSS3。但它并不在所有浏览器上运行。

您可以在此处利用信息。http://www.w3.org/TR/css3-2d-transforms/

你也可以这样做。

.rotate {
    -webkit-transform: rotate(30deg); /* safari and chrome */
    -moz-transform: rotate(30deg);/*firefox browsers */
    transform: rotate(30deg);/*other */
    -ms-transform:rotate(30deg); /* Internet Explorer 9 */
    -o-transform:rotate(30deg); /* Opera */
}

http://jsfiddle.net/jJdxc/

编辑：

我在互联网上搜索时看到了这个javascript插件。它对翻译过程非常有用。

http://fabricjs.com/

http://fabricjs.com/kitchensink/

Answer 3

要解决可能发生的闪烁/卡顿问题，您可以尝试将 css 属性backface-visibility设置为在动画元素上hidden。

在您的情况下：

#myVid {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

这解决了我关于"闪烁"元素的问题。

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility