Question

我正在构建一个基于iOS Safari触摸的应用程序，并找到CSS过渡和转换工作。

但我有两件事似乎只能使用JavaScript和CSS来实现。

通常我希望元素翻译的持续时间为0.2秒。但在代码中我偶尔想要立即翻译（初始定位）。如果我将持续时间更新为0或完全删除过渡样式，它似乎没有效果（就像0.2s是不可变的那样）
缩放时我想更新transform-origin属性。这似乎也不起作用，似乎停留在我原来的样式表设置值。具体来说，我试图在gesturestart和gestureend事件上执行此操作

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

更新

我有一个js小提琴示例来更好地说明我在＃1中的问题，事实证明setTimeout修复了它，但这是一个奇怪的解决方案，我有兴趣改进：

http://jsfiddle.net/w9E7t/

似乎我无法同步执行这些步骤：

为即时过渡设置适当的类
应用过渡样式
将类重置为默认值（具有转换）状态

Answer 1

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

Web开发的一个最佳实践是将文档的各个部分分离为结构/内容（HTML），表示（CSS）和交互/行为（JS）。在上面的示例中，内容的呈现（定时转换）保持在CSS中定义，而JS仅用于响应交互（MouseClick事件）。
您应该能够使用JS中的transform-origin样式属性更改元素的WebkitTransformOrigin。这是一个示例JSFiddle。我在我的iPhone4上测试了它，它正确地在控制台中记录了新的转换起源。同样，这也可以通过使用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设置为1ms（其中基本上看起来很快。）

虽然setTimeout方法看起来很乱，但许多移动框架组在其代码中使用它，因为该函数将在转换类（类似于transitionEnd）之后发生。看看Sencha Touch，你会发现它很多次。

我已经分叉你的JSfiddle来展示我的例子here。

有没有一种以编程方式动态更新部分变换和转换的正确方法？例如变换起源或持续时间

更新

1 个答案:

更新