Isotope's CSS hooks overwrite previous transform styles

[metafizzy]

Isotope's CSS hooks overwrite previous transform styles

[kirbysayshi]

Since you mentioned not wanting to do another iteration on that for ( fnName in data ) loop, some options:

1. if it's the actual loop you're worried about and not the function calls in the loop, then you could change the storage format to an array of objects, each with value and name properties.
2. if it's the function calls you want to limit, then a better way might be to plugin-ify (or use an existing one: https://github.com/brandonaaron/jquery-cssHooks/blob/master/transform.js) the CSS hooks, and let them do their thing. Then, if you need to keep state internally, do so in a namespaced object in $(elem).data(), for example: $(elem).data('isotope').transform. Then you only need to loop through the properties you care about.

Also, regarding issue 2), I'm not sure this is possible without using JS. The transform css property doesn't properly cascade, so regardless if isotope is being used, setting

transform: rotate(30deg);

and later
transform: translate(20px, 30px);

in CSS will cause only the translation to be applied (I realize that you know this, I'm just outlining some of the issues). The short: I believe an all-in-one solution might be the only option.

[desandro]

In 3 years, only one other response, and it was 3 years ago. Closing as cancelled. Fair thee well #22