Hard Transition - No fade or frolics

Comments

• Sharpe

  May 2014

  You can view the page source of a Twine game and "look under the hood." When doing so, I saw this:

  <style id="transitionCSS">
.transition-in {
opacity:0;
position:absolute;
}
.passage:not(.transition-out) {
transition: 1s;
-webkit-transition: 1s;
}
.transition-out {
opacity:0 !important;
position:absolute;
}
</style>


  So, I tried this in a stylesheet:

  .passage:not(.transition-out) {
transition: none;
-webkit-transition: none;
}

  Seemed to work.
  
  
• Commissar 64

  May 2014

  Thanks Sharpe! I'm still getting the briefest flicker of a blink between passages with images. At first I thought it was my janky reverse-engineered stylesheets or because I'm using Leon's typewriter effect. However I suspect this is just the browser taking a moment to load the image. It's fine in any case and this is still hugely better than before so thanks again. You're a star.
  
  Hope if someone else ever looks on how to solve this problem they find this thread via search.
• Strangelander

  May 2014

  Are you importing the images or just linking to them? Importing should preload them. Go to Story > Import Image > From File...
• Commissar 64

  May 2014

  I've been importing the images via the new flashy 1.4 system.
  
  I think actually the problem is the unique stylesheet I'm using. It's a lightly modified version of Leon's "The Earth's Story Illustrated" http://www.glorioustrainwrecks.com/node/5163
  
  My stylesheet:
  
  _{#sidebar {
    display:none;
  }
  body {
    margin: 0;
    padding: 0;
    height:100%;
  }
  #passages {
    margin:0;
    padding: 0;
    height:100%;
  }
  #passages * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .passage {
    position:relative;
    width: 80%;
    font-size:3em;
    font-family: "SF Pixelate";
    margin: 2em auto 0 auto;
  }
  .passage .header {
    width:100%;
    height:650px;
    min-height: 480px;
    border: #fff double 0.5em;
    border-radius: 1em;
    margin: 0 auto 1.5em auto;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
  }
  .passage .content {
    top: 500px;
    width:100%;
    border: #fff double 0.5em;
    border-radius: 1em;
    padding: 1em;
  }
  a.internalLink, a.externalLink {
    color:#eee;
    font-weight:normal;
  }
  a.internalLink:hover, a.externalLink:hover {
    text-decoration:none;
    border-bottom: none;
    color:#000;
    background-color:#fff;
    font-weight:normal;
    padding-left: 0;
  }
  a.internalLink:active, a.externalLink:active {
    border-bottom: 0;
  }
  @media screen and (max-width: 960px) {
    .passage {
      font-size: 1.5em;
    width: 75%;
    }
  }
  @media screen and (max-width: 640px) {
    .passage {
      font-size: 1.25em;
    width: 95%;
    }
  }}
  
• mostly useless

  May 2014

  Sorry to piggyback here. Is there any way to selectively apply Sharpe's hard-transition to certain passage links, but not in all cases?
• Yorekani

  May 2014

  mostly wrote:

  
  Sorry to piggyback here. Is there any way to selectively apply Sharpe's hard-transition to certain passage links, but not in all cases?
  

  
  
  My answer before reading carefully: (Didn't want to delete it since it may still be useful) (Since I registered just to write this reply, I just found out that there is no spoiler function, or I'm unaware of it)
  That's actually pretty simple. All CSS needs to be in a passaged tagged with "stylesheet". If you have other CSS (like changing the background color for all passages), make a new passage. Put the CSS-code from Sharpe in this passage. Now add another tag to your passage. Call it "noTransition" for example. You can't use "no transition" because tags are separated with spaces already. Unless you want to check for two tags instead of one. The only part that's left now is to tag every passage that should be affected by this.
  
  After reading carefully: In addition to the "stylesheet" tag, you'll need the "transition" tag. It should still be possible to apply it selectively with the method mentioned above (add additional tags to a stylesheet passage to apply the stylesheets selectively). If that's not the case, I can't personally answer your question, but it'll probably need a widget or script then.