如何为 :before 和 :after 伪元素启用 -webkit-animation/transition-property？

Posted 2023-03-06

【中文标题】如何为 :before 和 :after 伪元素启用 -webkit-animation/transition-property？

【英文标题】：How to enable -webkit-animation/transition-property for :before and :after pseudo elements?

【发布时间】：2011-04-20 18:48:31

【问题描述】：

如何为 :before 和 :after 伪元素启用-webkit-animation？

您可以在 http://jsfiddle.net/4rnsx/ 中看到它不适用于 :before 和 :after。 在这里，我尝试使用 Mootools http://jsfiddle.net/6bzCS/ 启用此功能。 Mozilla - 将在 Firefox 4 中支持它https://developer.mozilla.org/en/CSS/-moz-transition-propertyW3C - CSS3 支持所有元素的转换属性，:before和 :after 伪元素 http://www.w3.org/TR/css3-transitions/#transition-property 更新：如何为 CSS3 工具提示 http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using-css3-and-jquery/ 和 demo 启用 fadein,fadeout？

【问题讨论】：

抱歉，您为什么要将淡入淡出作为专有浏览器前缀过滤器？ mootools 确实提供了一种完美可行的跨浏览器淡入淡出元素的方式，请查看 mootools 文档中的 element.fade()。

mootools el.fade() 不适用于 :before 和 :after 伪元素

hrm，好电话。似乎无法使用选择器来检索 :before 元素 - 有趣的问题 ++，是的，我相信你可以重构它，但这不是重点。

是的，但是这种延迟/淡入行为在旧版本中效果不佳，请查看我不久前提出的淡入淡出修复票：mootools.lighthouseapp.com/projects/24057/tickets/… - 所以你需要抓住最新修补的tips.js - 或者使用我刚刚放在一起的github代码看看这个小提琴：jsfiddle.net/dimitar/5CRUZ/4或jsfiddle.net/dimitar/5CRUZ/5

当然。您可以使用 text: override 传递如何定义提示数据并将其模板化或使用元素存储：jsfiddle.net/dimitar/5CRUZ/6 仍然 .tip-text 和 .tip-title .tip-top 和 .tip-bottom 是完全可设置样式的通过css

【参考方案1】：

问题中提到的 jsFiddle 在现代 Chrome 和 Safari 浏览器中看起来很好。我认为浏览器的进化已经解决了动画方面的问题。

但是，对于事物的过渡方面，仍然存在一个突出/未解决的错误： http://code.google.com/p/chromium/issues/detail?id=54699

【讨论】：

你是对的。我打开了那个 webkit 问题，似乎它仍然无法在 Chrome 18 上修复。很遗憾自 Chrome 6 以来问题就被打开了。

【参考方案2】：

该错误已于 2013 年 1 月 3 日在 Google Chrome 24 中修复。

等待 Safari 提取这些更新。

See how things are doing with other browsers here