Add script to prevent transitions on page load

5 年前 · ee302058d6
--- a/static/sexy.css
+++ b/static/sexy.css
@@ -169,6 +169,7 @@ a:hover {
 }

 .game-logo {
 	transition: 0.3s;
 	opacity: 0.5;
 }

@@ -189,6 +190,7 @@ a:hover {
 	transform: translate(-50%, -50%) scale(1, 1);
 	z-index: 1;
 	font-family: 'Source Code Pro';
 	transition: 0.4s ease-out;
 }

@media (max-aspect-ratio: 1/1) {
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,6 +3,23 @@
    <head>
        <title>crux.sexy</title>
        <link rel="stylesheet" type="text/css" href="sexy.css">
        <!-- stops transitions from firing on page load
             from http://joshfrankel.me/blog/prevent-css-transitions-on-page-load-with-es6/  -->
        <script>.preload-transitions * {
            $null-transition: none !important;
          
            -webkit-transition: $null-transition;
            -moz-transition: $null-transition;
            -ms-transition: $null-transition;
            -o-transition: $null-transition;
            transition: $null-transition;
          }</script>
          <script type="text/javascript">
            document.addEventListener("DOMContentLoaded",function(){
              let node = document.querySelector('.preload-transitions');
              node.classList.remove('preload-transitions');
            });
          </script>
    </head>
    <body class={{"nightly" if nightly else ""}}>
        <div class="title">
@@ -44,5 +61,6 @@
                server
            </div>
        </a>
        
    </body>
 </html>