问题标签 [webkit-transition]

我-webkit-transition在 HTML 页面中的效果遇到问题。页面在这里：

http://www.newerawrestling.co.uk/new/

基本上，主要部分中链接的颜色（<section>分别在标签中标记）似乎被破坏了。它们应该是灰白色 (#F5F5F5) 并在悬停时过渡到金色 (#FFCC00)，但它们显示为灰色并在悬停时在白色和金色之间闪烁，但不会按应有的方式运行。

我已经验证了 HTML 和 CSS；与 CSS 一起传递的 HTML 未能包含 CSS3 选择器和声明（据我所知），我已经使用 Chrome 的 Web Inspector 检查了链接，但看不到任何冲突的规则。

有没有人遇到过这个问题，或者能够看到我哪里出错了？

已解决- 问题是进行旋转会将一半元素放在网页的中性（零）Z 轴后面，而 WebKit 显然不允许鼠标事件通过那个“中性”平面。因此，将旋转点更改为面板的右/左边缘解决了它。很奇怪，但现在它有效。

我有一个带有四个面板的简单 HTML5/CSS3 页面。这些面板使用 -webkit-transform 将它们形成一个很好的排列。在 :hover 上，我使用 -webkit-transform 将面板带到前台。代码如下。

发生的情况是 :hover 动作不可靠。如果我在面板上滑动鼠标，通常会在鼠标悬停在面板上时停止移动鼠标，但面板仍处于其原始位置。具体来说，从左向右滑动，最左边的两个面板似乎工作正常，但最右边的两个不会放大，直到鼠标穿过面板的一半。

什么会导致这个？

编辑：快速跟进，看起来放置在转换元素中的链接只能在元素的最左侧（对于两个左侧面板）或最右侧（对于两个右侧面板）的一半上单击。换句话说，点击区域仅对元素的“较近”一半有效。

首先，HTML（最小示例）：

和CSS：

我正在使用 WebKit 过渡来为某些 CSS 更改设置动画。
例如，假设我有一个红色框，当有人悬停时我想将其更改为绿色。我用这个：

这很好用。但是现在，说我希望它也向下滑动一点。我用这个：

这也可以，但我希望盒子快速滑下（比如 50 毫秒）。我无法更改-duration，因为这会使颜色动画快速。

如何为 CSS 动画中的不同属性分配不同的持续时间？
如有必要，我可以使用关键帧动画，但我还没有看到他们可以帮助我的方法。

jsfiddle供参考

由于这会将转换持续时间设置为 1 秒： $('#objectID').css('webkit-transition-duration','1s');

我假设这将返回当前的持续时间值： $('#objectID').css('webkit-transition-duration');

但事实并非如此。

我使用 Javascript 对对象进行了转换：

我听过渡结束事件：

事件被触发，一切都按预期工作。但是，当元素开始时left:100px并且您尝试对其进行动画处理时，left:100px该事件永远不会触发，这会导致问题。我将如何解决这个问题？我无法真正检查新值的值，因为

我还是 HTML5 的新手，但我遇到了一个非常奇怪的行为。（在铬）

以下代码适用于 chrome：

但是，如果我移动这条线：

到 moveIt 函数的开头，跨度只是跳跃而不过渡

javascript部分将是这样的：

那么这里有什么区别呢？不过，这两种情况在 Firefox 上运行良好。我没试过IE。

我很感激我能得到的任何帮助！

我的代码在这里。共有三个位置：zero(0,0), end(200,200), random(0,200)。

一个 div 位于random(0,200)开头的位置。

我想要 ：

步骤 1) 将 div 设置在 position 中zero(0,0)。这一步没有动画

步骤2）通过过渡将其从一个位置移动zero到另一个位置。end这一步有动画

像这样的代码不能很好地工作：

似乎过渡开始得太早了，而 css style( className = 'pos_zero') 还没有完全应用。它只是直接从一个位置移动到另一个random位置end。而我真正想要的是end从 position 定位的动画zero，而不是 from random。

像这样的代码有效：

此代码通过使用timeout函数成功完成。此代码首先将 div 设置在位置pos_zero，然后通过timeout函数进行异步转换。而且timeout功能似乎不是很专业。

所以，我正在寻找更专业的解决方案。

顺便一提。我想知道。是否有任何方法可以确保完全应用样式，例如“Style.flush()”之类的？

@Inerdial 它确实有效！非常感谢。要强制更新（强制立即同步重排或重新布局），您的 javascript 应该读取受更改影响的属性，例如 someSpan 和 otherSpan 的位置。` 新代码无需超时即可工作。

谢谢大家。并对我造成的混乱感到抱歉。

我有一个全屏覆盖，我目前在 jfiddle 中设置了它，所以它只是淡入 http://jsfiddle.net/9NJP9/1/ 我想要它做的而不是淡入淡出是从顶部动画屏幕向下到底部；滑下来。我的网站比屏幕高度长，当单击按钮时，虽然我真的不希望它从整个网站的顶部一直滑到页面底部，只是从屏幕顶部滑到屏幕底部，然后即使有人滚动也停留在那里。我只是不确定如何操纵 css 来做到这一点。

我能得到的任何帮助都会很棒，谢谢。

我有一个事件监听器，我正在尝试开始工作，但似乎无法让它运行。我有一个 onclick 设置，可以切换 div 的类以提示 webkit 转换。当该转换结束时，我希望 jquery 将外部页面加载到 div 中，但它不会加载它。这是我设置的js

我不确定为什么它没有加载，但我能得到的任何帮助将不胜感激。

为了创建一些 swooshey 菜单，我正在尝试<li>使用 jQuery 在元素上设置 CSS 过渡属性。HTML 如下所示：

我正在尝试对 中的"transform 0.3s ease-in-out XXXXs, padding-left 0.1s ease"每个元素应用过渡.main-nav-child，其中 XXX 为菜单中的每个项目增加。

我正在使用一个.each()循环来迭代每个顶级列表项，然后在其中的另一个循环迭代内部列表中的项目。然后我尝试使用 javascript 设置转换：

读完后，我尝试使用 jQuery 的.css方法：

我也尝试过使用 CSS 样式而不是 DOM 样式属性名称：

问题

The loops seem to work fine, and after much fiddling with Chrome's web inspector, it seems that when I try to set c.style.WebkitTransition to something, it works, but the property isn't stored. It does the same in the console (se here: http://cl.ly/Lbau)

I'm been playing around with this for the better part of half a day, so if anyone can help me out I'd be most appreciative!

Cheers.