点击时翻译 div答案

【问题标题】：translate div on click点击时翻译 div
【发布时间】：2012-05-24 16:55:50
【问题描述】：

我需要让一个 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);
}

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

【问题讨论】：

向我们展示您目前拥有的代码的相关部分。 :)
向您展示 html 和 css 将帮助我们更好地为您服务..
看看我发布的 js fiddle。我强烈建议建立一个 CSS 规则来管理 webkit-transform 状态，而不是手动将 CSS 添加到属性 style 属性中。它将更易于维护。

标签： javascript jquery translate-animation

【解决方案1】：

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

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

在示例中，只需在我的 div 中添加和删除“已移动”类，它将调整必要的空间。

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

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

【讨论】：

您提供的解决方案在 IE 中确实有效。它与不同的浏览器不兼容..
哈哈——抱歉。我整天只在移动设备上工作，我都忘记了。
好的，我刚刚更新它以对“左”属性进行基本调整
对其他人更好，但对我来说很好（它适用于 ios5，soooo）
Updated link，适用于其他所有人。请注意，如果答案所有者更新答案，此评论可能无用。

【解决方案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/

【讨论】：

【解决方案3】：

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

在你的情况下：

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

这解决了我的“闪烁”元素问题。

【讨论】：