This is just a raw copy of the comments left on my blog before I started redirecting to GitHub.
[...] Ruter has developed a very nice shim that allows you to get CSS Transitions support in browsers that do not have the WebKit [...]
Since jQ 1.3, $.browser deprecated, use: $.support
Nice! I’ve done something very similar with CSS Transforms, maybe you’ve seen the blog post: http://paulbakaus.com/?p=11, the source is now available at http://code.google.com/p/transformie/. Similar way of providing functionality, but I’m not using DHTML Behaviours here but mostly onpropertychange.
Thanks for this one, this is brillant!
It’s nice to see that someone took the idea further and developed an innovative implementation (I didn’t know about XBL and DHTML behaviors before) for jQuery. Great that you’ve not just ported my script to jQuery, but came out with a different (for pure CSS Animations faster + better) approach!
Chris Schneider
(author of “CSS Effects for mootools”)
On <Firefox 3.1, can’t you just use an application/xml data: URI?
@Elijah Grey: yes, in FF3.1 we can reference XBL documents with data:
URIs https://developer.mozilla.org/en/XBL/XBL_1.0_Reference/Elements#binding
I didn’t incorporate this feature yet, but it’ll be good to add once FF3.1 is out.
Awesome stuff! I’m going to try it out and hopefully start using it in my projects. I love CSS transitions and webkit. Kudos to allowing us to rely on these handy transitions in the majority of web browsers.
Well done, looks really nice. OH, @Jim Jeffers – I am excited to see what you come up with on some of your projects, while dominating the world.
This is pretty nice.
Whatever server that ReBath Oregon is hosted on seems really fast!
Someone has implemented a Cubic Bezier timing function compatible with -webkit-transition-timing-function
.
Very impressive work. Quite an ambitious project, I didn’t think this could be done in a way that supported IE7.
Wow! This is really the bridge from rude reality to the melodious future.
some points about CSS names:
#content, #left, #right { /*@transition-rule@*/ .... }
will NOT work as base rule. Workaround:
#content { /*@transition-rule@*/ .... }
#left { /*@transition-rule@*/ .... }
#right { /*@transition-rule@*/ .... }
Also, check the link of “PHP file” in article – it’s now broken (links to code.google)
Thanks!
@Andrey: Thanks pointing this out. I also fixed the links to Google Code.
In case people are interested, I have written a jQuery plugin to automatically enhance the $.animate function to use CSS3 transitions on browsers that support it. You don’t have to change any of your Javascript, this plugin simply takes care of the rest once its included. Hope its of use:
I did a quirky proof of concept about this a bit before you. Glad you implemented it fully!
Hadn’t seen that, nice! I’m still working on the plugin daily but the more its being used across the web the more fixes are being applied. Its pretty solid in a complex environment now and is making life with iPad compatibility much easier.
Hey, that really great work. I had something similiar in mind. Nice to see it already working
I am experiencing Problems with the new Firefox 4.0 Beta 6. The Elements somehow disappear in that Browser. (Errorconsole output: XBL-file is incorrect. Did you forget a Bindings-Tag? and Error: FAH_getOutputNodeById: id is null!!’ when calling method: [nsIConsoleListener::observe])
I hope this helps.
Thanks, Jonathan. Since Firefox 4 supports CSS Transitions natively, the script should be modified to abort as it does in Safari/Chrome when viewing in Firefox 4. I haven’t yet got my feet wet in Firefox 4, but if you’d like to figure out why the native-detection isn’t working, please submit a pull request to the repo on GitHub and I can apply it. Thanks!
Maybe you should consider registering it as a modernizr polyfill. AFAIK there is no registered library for transitions. Combining it with yepnope would also fix the “what if my browser already supports transitions” thing.
Great work!
Hi Weston.
First of all, let me thank you for this plugin.
I’m having a little trouble in IE9 with it though – It keeps throwing this error when debugging:
SCRIPT5007: Unable to get value of the property 'replace': object is null or undefined
jquery.css-transitions.min.js, line 8 character 3121
Can you help me out on this?
Thank you.
Hi again Weston.
Been trying to get everything to work on IE but with no success.
Keep getting ‘undefined’ error on IE8 and 9, as well as an error related to bindings.php (the object do not support this property or method).
Is anybody else having this problems?
Cheers.