1

我正在构建一个基于 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. 将类重置为其默认（带转换）状态
4

1 回答 1

1

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

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

  2. 您应该能够transform-origin使用WebkitTransformOriginJS 中的 style 属性更改元素。这是一个示例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 在这里展示我的例子。

于 2011-08-30T16:20:44.427 回答