css - 是否有适当的方法以编程方式动态更新部分转换和转换？例如变换原点或持续时间

Question

我正在构建一个基于 iOS Safari 触控的应用程序，发现 CSS 过渡和转换效果很好。

但我有两件事似乎无法仅使用 JavaScript 和 CSS 实现。

1. 通常我希望元素以 0.2 秒的持续时间进行翻译。但是在代码中我偶尔会想即时翻译(初始定位)。如果我将持续时间更新为 0 或完全删除过渡样式，它似乎没有效果(就好像 0.2s 是不可变的一样)

2. 缩放时我想更新 transform-origin 属性。这似乎也不起作用，而且似乎停留在我原来的样式表设置值上。具体来说，我正在尝试在 gesturestart 和 gestureend 事件上执行此操作

希望有一种方法可以使这项工作成功。也许 setTimeout 异步处理？

更新:

我有一个 js fiddle 示例可以更好地说明我在 #1 中的问题，事实证明 setTimeout 修复了它，但这是一个我有兴趣改进的奇怪解决方案:

http://jsfiddle.net/w9E7t/

看来我无法同步执行这些步骤:

1. 为即时转换设置适当的类
2. 应用过渡样式
3. 将类重置为默认(带转换)状态

Answer 1

1. 您可以通过使用两个 CSS 类来完成此操作，一个将 timing-duration 设置为 0s，另一个将其设置为 200ms，然后在 JS 中以编程方式应用这些类。看看这个JSFiddle举个例子。

   Web 开发的最佳实践之一是将文档的各个部分分为结构/内容 (HTML)、表示 (CSS) 和交互/行为 (JS)。在上面的示例中，内容的呈现(定时翻译)保持在 CSS 中定义，而 JS 仅用于响应交互(鼠标单击事件)。

2. 您应该能够使用 JS 中的 WebkitTransformOrigin 样式属性更改元素的 transform-origin。这是一个例子 JSFiddle .我在我的 iPhone4 上对此进行了测试，它在控制台中正确记录了新的 transform-origins。同样，这也可以通过仅使用 JS 来监听手势事件和更新元素的类来实现，同时保持表示逻辑 (CSS) 中定义的类的样式规则。

请注意:在我的示例中，我正在更新元素的 .className。由于您的元素可能已经有很多类，因此您可能需要实现 addClass/removeClass 函数以正确设置正确的类，可以在 Web 上找到一些示例。

更新:

抱歉耽搁了...有两种方法可以解决这个问题，第一种方法您已经发现了。

另一种处理切换回类名的方法是使用 webkitTransitionEnd 属性。只要元素上的过渡结束，就会触发此事件。它看起来像这样:

document.getElementById('puck').addEventListener('webkitTransitionEnd', function() {
    puck
        .removeClass('without_transition')
        .addClass('with_transition')
}, false);

不幸的是，当 transition-duration 属性设置为 0 时，不会触发此事件 :( 我不确定这是设计使然还是错误，但这就是目前的情况已实现(虽然我猜这是设计使然，因为此时浏览器并不是真正进行转换，而只是应用转换)。这种方法的解决方法是设置 transition -duration 到 1 毫秒(这实际上看起来是即时的)。

虽然 setTimeout 方法看起来很老套，但许多移动框架组在他们的代码中都使用它，因为该函数将在切换类(类似于 transitionEnd)发生的转换之后触发。看看 Sencha Touch，你会发现它很多次。

我已经 fork 你的 JSfiddle 来展示我的例子 here .