How do I morph a class with Scripty 2?

Question

In Scriptaculous 1, you could animate styles:

new Effect.Morph('id', {
style: { background: tomato },
duration: '4' });

But a better way was to keep the CSS and JS separate and merely reference a class:

new Effect.Morph('id', {
style: 'important',
duration: '4' });

Marvellous. But this doesn't seem to work with the new Scripty 2. Works:

$('id').morph('background: tomato', { duration: 4 });

Breaks:

$('id').morph('important', { duration: 4 });

What is the right way to animate using a class in Scripty 2? (I suspected Style, but the docs were vague.)

Cheers.

Answer 1

I checked out the source code and s2 only takes 'styleProp:value' for the style option. The string needs to have a colon.

The only method that will additionally take the class name as well 'styleProp:value' for the style option is a method called S2.FX.Operators.WebkitCssTransition. However, the S2.Extensions.webkitCSSTransitions are turned off by default. Although, the code in that method to be used to make your own patch to the .Morph method.