问题标签 [css-transitions]

我正在尝试在为 iPad 构建的 web 应用程序中淡入 div。iPad 窒息尝试使用 jQuery 的 fadeIn() 方法，所以我尝试-webkit-transition: opacity 1s linear使用 javascript 进行转换并将不透明度更改为 0 或 1。它看起来很平滑，除了它在淡入淡出结束时会非常刺耳地闪烁一次。

正如我不久前在这里了解到的那样，当我设置时，这种闪烁会立即消失-webkit-backface-visibility: hidden。不幸的是，当我设置了该设置时，div 不再检测用于关闭它的 click 或 touchstart 事件。我非常有信心这是问题所在，因为当我在检查器中删除该属性时，它会完美地读取点击次数。我发现其他人在 SO 的评论中提到了类似的错误，但没有给出解决方案。

有谁知道如何解决这个问题？

我正在设置此样式以在元素高度从 0 变为 30时显示动画：

但是当元素高度从 30 变为 0时，它也会显示动画。如何避免第二个动画？

谢谢。

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

我有一个 HTML 元素，其中悬停时不透明度会发生变化（使用 CSS3 过渡）。问题是在 Firefox 中（至少在 Windows 上），元素（a <div>）中的文本（a <p>）在不透明度更改期间明显变暗，然后“弹回”到它应该是分数的方式过渡结束后的一秒。像这样（视频）：

http://screencast.com/t/zzWc9EF8wq4c

在 Chrome 中不会出现此问题。

有什么想法可能导致这种情况吗？任何解决方法？

我如何检测浏览器是否支持使用 Javascript（并且不使用modernizr）的 CSS 转换？

在单个元素上一个接一个地运行一系列单独的 CSS3 转换的语法上干净的解决方案是什么？一个例子：

• 将左侧设置为 10 像素，不透明度设置为 1 到 200 毫秒
• 在 500 毫秒内将左侧设置为 30 像素
• 将左侧设置为 50 像素，不透明度设置为 0 到 200 毫秒

这可以在没有 JavaScript 的情况下完成吗？如果没有，如何用 JavaScript 干净地编码？

HTML 结构

图像有阴影，所以border不是解决方案，因为它会在图像之外

边框正在过渡，它在 FF 上运行顺畅，但在 chrome 或其他浏览器中无法运行

这是我使用过的代码

笔记：

只是每个图像都包含在一个 div 中的容器，因此我们可以实现 :after

我想做一个 CSS3 变换：rotate(360deg); 在过渡 1s；在背景图像上而不是单独的图像（元素）上。这可能吗？我已经从谷歌搜索了地狱，但没有成功！我想要实现的是：

我希望这是可能的！我知道它在 JS (jQuery) 中很容易实现：

...但我想知道是否可以仅使用 CSS(3)

HTML：

可以在 prepend 方法中添加回调吗？我需要等到 DOM 重建，然后开始淡入淡出动画。

动画是用 CSS3 过渡制作的，所以我只需要等待 DOM 准备好然后更改 CSS 不透明度。

这是摆弄我的问题...

我似乎发现了 CSS3 过渡的缺陷。希望不是。这是两难的。

过渡根本不是这样工作的。如果删除了 display:none 属性，那么它确实有效，但是在这种情况下，我们需要链接上的 display:none 属性，以便在悬停之前无法与之交互。

有任何想法吗？

奇妙