[Sugarcube] Part of the UI menu doesn't fade in properly during passage transitions

Question

Hi, all. This problem probably has a simple solution, but I'm tearing my hair out trying to figure out what it is.

I'm using Sugarcube 2.18 and Twine 2.1.3. I set up page transitions between "chapters" in my story by using class selectors like so:

body.chapterstart .transition-in 
	{
	  position: absolute;
	  opacity:0;
	}

body.chapterstart .passage
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

The transitions are working fine except for one thing: the inner borders of the menu table load instantly, not with the 1-second delay. Since I set the UI bar to change colors between certain sections of the story, this looks pretty awful in action. I ended up adding code for every element of the UI bar and menu to try and get the table borders to fade in properly, but no dice. Here's the full code:

body.chapterstart .transition-in 
	{
	  position: absolute;
	  opacity:0;
	}

body.chapterstart .passage
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #ui-bar
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #ui-body
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #story-title
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #story-subtitle
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #story-author
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #story-caption
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #menu
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #menu ul
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #menu ul:empty
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #menu li 
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #menu li:not(:first-child) 
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #menu td
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}
	  
body.chapterstart #ui-bar-toggle
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}

body.chapterstart #ui-bar-history [id|="history"]
	{
	  transition: 1s linear;
	  -webkit-transition: 1s linear;
	}
	  

Could you please tell me what I should put in to get the inner table borders to fade in like the rest of the passage? (And is there a more elegant alternative to the code I typed out?) Thank you!

Answer 1

I don't know what exactly you mean by table borders, so this answer may be dumb. 

You don't need all that CSS, probably.

You could try to specify which rule to transition when you use the transition property, which worked for me.  Here's an example.

In CSS:

body.blue #ui-bar { background-color: blue; }
body.red #ui-bar { background-color: red; }

#ui-bar {
    transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
}

In passage:

::Start
[[bluepassage]]
[[redpassage]]

::bluepassage [blue]
[[Start]]
[[redpassage]]

::redpassage [red]
[[Start]]
[[bluepassage]]

Note. The above TwineScript is in Twee notation:

::passage title [passage tags list]
passage code and content

::a different passage
etc...

 

Comments

Thanks for your response, Chapel. Here's a picture showing what I'm talking about, with the inner table borders circled in orange: http://i.imgur.com/UX5SCBQ.png

Basically, it's the lines in between each menu item. This story has gotten huge, so I'm trying to avoid adding more text to the individual passages, but I'll give the codes above a shot!