是否有一种适当的方式来动态地更新转换和转换的部分?例如，转换起源或持续时间

Question

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

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

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

2. 缩放时，我想更新transform-origin属性。这似乎也不工作，似乎卡在我原来的样式表集的值。具体来说，我尝试在gesturestart和gestureend事件

   上执行此操作

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

更新:

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

http://jsfiddle.net/w9E7t/

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

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

Answer 1

1. 你可以通过使用两个CSS类来实现这一点，一个将timing-duration设置为0，另一个将其设置为200ms，然后在JS中以编程方式应用这些类。看一下这个JSFiddle的例子。

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

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设置为1ms(这实际上看起来是即时的)。

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

我已经fork了你的jsfield来展示我的例子。