通过 jQuery addClass 实现 CSS 转换的插件?

发布于 2024-11-18 01:59:38 字数 667 浏览 2 评论 0原文

我正在寻找一个库,它允许我通过 jQuery 的 addClass / removeClass / toggleClass 函数轻松使用 CSS 转换。即我希望这些函数在 webkit 中不执行任何操作(除了添加 CSS 类之外),但在 IE 中使用 jQuery 动画。 jQueryUI 替换了这 3 个函数并接近我需要的功能,但它仅适用于确切的元素(例如 $('#myID').addClass('foo'); 不会产生动画 < code>#myID.foo .someClass)

我环顾四周,找不到任何可以做到这一点的东西,希望有人知道:) 如果没有,解决方案需要:

  1. 解析页面上的所有 CSS 样式表过渡属性
  2. 匹配所有具有转换的样式表(例如 -webkit-transition
  3. 将这些样式表存储
  4. addClass 等上,与当前和树下的样式表匹配(例如 .addClass .someOtherClass
  5. 将动画应用于所有匹配的元素(或样式规则)

因此,如果有人知道任何现有的解决方案来解析样式表(它们的文本)或为规则设置动画(而不是单个节点),那也会很有帮助。

I'm looking for a library that will allow me to easily use CSS Transitions via jQuery's addClass / removeClass / toggleClass functions. i.e. I want these functions to do nothing (other than just adding a CSS class) in webkit, but use jQuery animations in IE. jQueryUI replaces these 3 functions and comes close to what I need, but it only works on the exact element (e.g $('#myID').addClass('foo'); doesn't animate #myID.foo .someClass)

I've looked around and can't find anything that does this, hopefully someone knows of one :) If not, the solution requires:

  1. parsing all stylesheets on the page for CSS transition properties
  2. matching all stylesheets with transitions (e.g. -webkit-transition)
  3. storing these stylesheets
  4. on addClass, etc match current and down the tree (e.g. .addedClass .someOtherClass)
  5. apply animations to all matched elements (or to the style rule)

So if anyone knows of any existing solutions to parse stylesheets (the text of them) or to animate a rule (instead of individual nodes), that would be helpful as well.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

烟花易冷人易散 2024-11-25 01:59:38

看起来你想要类似 jQuery++ 的东西

如果满足以下条件,jQuery.animate 会覆盖 $.fn.animate 以使用 CSS 3 动画
可能的。它采用与原始 $.fn.animate 相同的参数,并且
如果 CSS 动画是,将回退到 jQuery 的 JavaScript 动画
不可能。

您提出的方法对我来说似乎有点复杂,但也许有人为此提出了解决方案;)

looks like you want something like jQuery++

jQuery.animate overwrites $.fn.animate to use CSS 3 animations if
possible. It takes the same arguments as the original $.fn.animate and
will fall back to jQuery’s JavaScript animation if a CSS animation is
not possible.

your proposed approach seems a little bit complicated to me, but maybe somebody comes up with a solution for this ;)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文