[SugarCube] CSS selector for styling transitions? (RESOLVED)

lit

The transition seems to be instant by default. I'd like to style it differently.

greyelf

Reading the source code for the latest version of the Sugarcube <<replace>> macro there does not appear to be any CSS related to it, but I could be wrong.

TheMadExile

Unless you're replacing content on preexisting elements (ones from SugarCube itself), then you've probably created the elements in question and control their attributes, thus you're the only one who'd know what the selectors for those elements would be.

lit

I see. A very basic misunderstanding on my part. I'll explain for people who are new to CSS like me.

I assumed (incorrectly) that SugarCube, like Sugarcane, uses separate CSS for its variant of the <<replace>> macro.

In Sugarcane, the <<replace>> macro functions by creating and inserting <span> elements that are given certain class names; the purpose of these class names ("revision-span" "revision-span-in" etc) is to function as CSS selectors.

SugarCube's <<replace>> macro, however, doesn't insert or class elements in this way. Therefore, in order to define transitions for the <<replace>> macro's targets, I have to use the IDs and/or class name(s) of the elements I'm targeting.

TheMadExile

lit wrote:

I assumed (incorrectly) that SugarCube, like Sugarcane, uses separate CSS for its variant of the <<replace>> macro.

Pedantry Warning: While SugarCube does have a <<replace>> macro, Sugarcane does not have a <<replace>> macro.  The macro you're probably thinking of is an extension written by Leon (the combined <<replace>> macro set) and not part of the vanilla story formats.

Regardless.  Beyond their names, and the fact that they both replace one set of content with another, they are very different macros, which are part of very different suites.  SugarCube's DOM macros are tools allowing you to do DOM manipulations.  Leon's combined <<replace>> macro set gives you a set of prebuilt automatons that combine specific DOM manipulations with specific methods of control.

lit wrote:

SugarCube's <<replace>> macro, however, doesn't insert or class elements in this way. Therefore, in order to define transitions for the <<replace>> macro's targets, I have to use the IDs and/or class name(s) of the elements I'm targeting.

Indeed.  Though, as a suggestion and depending on how you're doing your IDs, I might suggest including a class specifically to be used as the selector for the CSS transitions.  While an ID is good for selecting a specific element for modification, your CSS selector groups could get a tad long if you depend solely on IDs.  So, in the case that you have many IDs, a generic class would allow you to apply the CSS transition styles to all of your replacements without having to provide an ID selector for each.