Fixes to transition on inline-block element transitions

10 years ago · af1eb0ec89
9 changed files with 150 additions and 102 deletions
--- a/build/minified/definitions/collections/menu.min.css
+++ b/build/minified/definitions/collections/menu.min.css
--- a/build/packaged/definitions/css/semantic.min.css
+++ b/build/packaged/definitions/css/semantic.min.css
--- a/server/documents/index.html.eco
+++ b/server/documents/index.html.eco
@ -22,7 +22,7 @@ type   : 'Semantic'
      <div class="ui large inverted right floated secondary menu">
        <div class="ui language top right pointing dropdown item" id="languages">
          <i class="world icon"></i>
-          <div class="text">English</div>
+          <div class="text">Language</div>
          <div class="menu">
            <div class="item" data-percent="100" data-value="en">English</div>
            <div class="item" data-percent="19" data-value="nl">Nederlands</div>
@ -48,26 +48,14 @@ type   : 'Semantic'
  <div class="ui page grid">
    <div class="column">
      <div class="introduction">
-        <h1 class="ui inverted header">Semantic UI
+        <h1 class="ui inverted header">
+          <b>UI</b>
+          <span class="text">is the DNA of the web.</span>
        </h1>
-        <h2 class="ui inverted header">
-          <b>UI</b> is the vocabulary of the web.
-        </h2>
        <div class="ui hidden divider"></div>
-        <div class="ui huge inverted buttons">
-          <a class="ui basic pink inverted view-ui button"><i class="cube icon"></i>UI Library</a>
-          <a class="ui basic red inverted button" data-title="Coming Soon">
-            <i class="theme icon"></i>
-            Themes
-          </a>
-          <a class="ui basic green inverted button" data-title="Coming Soon">
-            <i class="cubes icon"></i>
-            Layouts
-          </a>
-        </div>
-        <div class="ui hidden divider"></div>
-        <a class="ui huge basic inverted teal button" href="build/semantic.zip">
-          <i class="download icon"></i> Customize &amp; Download
+        <a href="build/semantic.zip" class="ui huge basic inverted teal download button">
+          Download Now
+          <i class="right chevron icon"></i>
        </a>
      </div>
      <div class="inverted advertisement">
@ -83,28 +71,31 @@ type   : 'Semantic'
    </div>
  </div>
 </div>
-<div class="stripe">
-  <div class="ui three column relaxed stackable page grid">
+<div class="feature stripe">
+  <div class="ui three column equal height center aligned divided relaxed stackable page grid">
    <div class="column">
      <h2 class="ui icon header">
-        <img class="ui icon image" src="/images/icons/Book-2.png">
-        50+ UI Definitions
+        <img class="ui icon image" src="/images/icons/Brush.png">
+        3000+ CSS Variables
      </h2>
-      <p>Everything you need to make a website on your own without being a UI designer.</p>
+      <p>The only dogma from this framework: everything arbitrary is mutable.</p>
+      <div class="ui disabled button">View Themes</div>
    </div>
    <div class="column">
      <h2 class="ui icon header">
-        <img class="ui icon image" src="/images/icons/Brush.png">
-        3000+ CSS Variables
+        <img class="ui icon image" src="/images/icons/Book-2.png">
+        50+ UI Definitions
      </h2>
-      <p>Everything arbitrary is changable. Three levels of theming inheritance.</p>
+      <p>Build your entire site with one UI stack. Extend using a common style.</p>
+      <div class="ui primary button">Browse UI</div>
    </div>
    <div class="column">
      <h2 class="ui icon header">
        <img class="ui icon image" src="/images/icons/Glasses.png">
-        2+ Years in the Making
+        2200+ Commits
      </h2>
-      <p>Semantic is a mature tool, used in multiple large scale production environments like <a href="http://www.newrepublic.com" target="_blank">The New Republic</a> magazine.</p>
+      <p>Developed over several years. Already used in multiple large scale production environments you <a href="http://www.quirky.com" target="_blank">may</a> have <a href="http://www.newrepublic.com" target="_blank">heard</a> of.</p>
+      <a href="https://github.com/Semantic-Org/Semantic-UI/issues" class="ui button">Visit GitHub</a>
    </div>
  </div>
 </div>
@ -132,9 +123,7 @@ type   : 'Semantic'
          <div data-value="GitHub" class="item">GitHub</div>
        </div>
      </div>
-
      <div class="ui divider"></div>
-
      <div class="ui button">
        View
      </div>
@ -156,51 +145,69 @@ type   : 'Semantic'
    </div>
  </div>
 </div>
-<div class="inverted stripe">
-  <div class="ui stackable two column very relaxed page grid">
+<div class="email stripe">
+  <div class="ui center aligned page grid">
    <div class="column">
-      <div class="code" data-type="html">
-        <div class="ui stackable two column very relaxed page grid">
-          <div class="column">
-            <!-- Recursion Omitted !-->
-          </div>
-          <div class="column">
-            <h1 class="ui inverted header">Code Intuitively</h1>
-            <p>Semantic uses concepts like nouns (types), adjectives (variations), and tense (states) to create UI definitions</p>
-          </div>
+      <h2 class="ui header">
+        Get Updates
+      </h2>
+      <p>
+        Semantic is growing fast. Want to see just how much? Sign up and we'll let you know</p>
+      <form method="post" action="http://www.nogo.com">
+        <div class="ui huge input" style="margin:0 auto">
+          <input type="text" placeholder="E-mail">
        </div>
-      </div>
+        <button type="submit" class="ui huge secondary submit button">
+          Sign-up
+        </button>
+      </form>
    </div>
+  </div>
+</div>
+<div class="inverted stripe">
+  <div class="ui stackable one column center aligned very relaxed page grid">
    <div class="column">
      <h1 class="ui inverted icon header">
        <i class="conversation icon"></i>
        Code Intuitively
      </h1>
-      <p>Semantic uses concepts like nouns (types), adjectives (variations), and tense (states) to create UI definitions</p>
+      <p>Semantic uses concepts similar to nouns, adjectives , and tense to create UI definitions. Making your code highly scannable.</p>
+      <div class="code" data-type="html">
+        <div class="ui stackable one column center aligned very relaxed page grid">
+          <div class="column">
+            <h1 class="ui inverted icon header">
+              <i class="conversation icon"></i>
+              Code Intuitively
+            </h1>
+            <p>
+              Semantic uses concepts like nouns (types), adjectives (variations), and tense (states) to create UI definitions
+            </p>
+            <!-- Recursion Omitted (Turtles all the way down) !-->
+          </div>
+        </div>
+      </div>
    </div>
  </div>
 </div>
 <div class="stripe">
-  <div class="ui stackable page grid">
+  <div class="ui stackable center aligned page grid">
    <div class="ten wide column">
-      <h1 class="ui header">
-        <img class="ui inline image" src="/images/icons/Spaceship.png">
+      <h1 class="ui icon header">
+        <img class="ui inline icon image" src="/images/icons/Spaceship.png">
        Liberate your Development
      </h1>
-      <p></p>
-      <div class="ui two column vertically padded grid">
+      <div class="ui two column center aligned vertically padded grid">
        <div class="column">
          <h3 class="ui header">Enterprise Ready</h3>
          <p>Build tools, performance logging, support for custom definitions, multiple-levels of theme inheritanceance—a developer's wet dream.</p>
+          <a class="ui large button">View Expert Guide</a>
        </div>
        <div class="column">
          <h3 class="ui header">Beginner Friendly</h3>
          <p>Don't feel comfortable tweaking everything? Download free community designed themes and use our customizer to build a package fit for your needs.</p>
+          <a class="ui large button">View Basic Guide</a>
        </div>
      </div>
    </div>
-    <div class="six wide column">
-
-    </div>
  </div>
 </div>
--- a/server/files/javascript/semantic.js
+++ b/server/files/javascript/semantic.js
@ -977,19 +977,21 @@ semantic.ready = function() {
    $themeDropdown
      .dropdown('setting', 'action', 'activate')
    ;
-    $(window)
-      .one('scroll', function() {
-        $('.masthead').addClass('zoomed');
-      })
-    ;
-    $('.masthead')
-      .visibility({
-        continuous: true,
-        onPassing: function(calculations) {
-          //$(this).css('opacity', 1 - calculations.percentagePassed);
-        }
-      })
-    ;
+    $('.masthead').addClass('zoomed');
+    setTimeout(function() {
+      $('.masthead h1 b')
+        .transition('fade in', 2500)
+      ;
+    }, 0);
+    setTimeout(function() {
+      $('.masthead h1 span')
+        .transition('fade in', 1000)
+      ;
+      $('.masthead .download')
+        .transition('fade in', 1500)
+      ;
+    }, 2000);
+
    $('.fixed.launch.button')
      .visibility({
        offset: 50,
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@ -439,18 +439,18 @@ body#example.hide {
  -o-animation-name: masthead;
  animation-name: masthead;

-  -ms-transition: transform 3s ease-in-out;
-  -webkit-transition: transform 3s ease-in-out;
-  -moz-transition: transform 3s ease-in-out;
-  transition: transform 3s ease-in-out;
+  -ms-transition: transform 5s ease-in-out;
+  -webkit-transition: transform 5s ease-in-out;
+  -moz-transition: transform 5s ease-in-out;
+  transition: transform 5s ease-in-out;

-  opacity: 0.12;
+  opacity: 0.15;

-  -webkit-animation-duration: 30s;
-  -moz-animation-duration: 30s;
-  -ms-animation-duration: 30s;
-  -o-animation-duration: 30s;
-  animation-duration: 30s;
+  -webkit-animation-duration: 15s;
+  -moz-animation-duration: 15s;
+  -ms-animation-duration: 15s;
+  -o-animation-duration: 15s;
+  animation-duration: 15s;

  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
@ -467,13 +467,14 @@ body#example.hide {
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

-  -webkit-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
-  transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
+  -webkit-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px);
+  -moz-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px);
+  transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateY(-14%) translateX(-2%) translateZ(300px);
 }
 #example .masthead.zoomed:before {
-  -webkit-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateZ(200px);
-  -moz-transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateZ(200px);
-  transform: rotateX(50deg) rotateZ(0deg) rotateY(0deg) translateZ(200px);
+  -webkit-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
+  -moz-transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
+  transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg) translateZ(0px);
 }

@keyframes masthead {
@ -524,24 +525,35 @@ body#example.hide {
 }

 }
+#example.index .masthead.segment h1 .text,
+#example.index .masthead.segment h1 b,
+#example.index .masthead.segment .download.button {
+  visibility: hidden;
+}
 #example.index .masthead {
  position: relative;
  overflow: hidden;
-  background: #191919;
+  background: linear-gradient(#081919, #001c1c) #191919;
+  background-color: #191919;
  padding: 3em 0px 3em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0px;
  border-bottom: none;
 }
 #example.index .masthead.segment h1 {
-  font-size: 5em;
-  color: #FFFFFF;
+  font-size: 3em;
+  color: rgba(255, 255, 255, 0.5);
  line-height: 1.2;
-  margin: -20px 0px 0px;
+  margin: 0px 0px 0px;
  padding-bottom: 0px;
 }
-#example.index .masthead strike {
-  color: rgba(0, 0, 0, 0.2);
+#example.index .masthead.segment h1 b {
+  display: inline-block;
+  font-weight: bold;
+  color: #FFFFFF;
+}
+#example.index .masthead.segment h1 .text {
+  display: inline-block;
 }
 #example.index .masthead h2 {
  font-weight: normal;
@ -564,12 +576,15 @@ body#example.hide {
 #example.index .introduction {
  position: relative;
  clear: both;
-  margin: 7rem 0rem 3rem;
+  margin: 15rem 0rem;
 }
 #example.index .logo {
  float: left;
  width: 35px;
 }
+#example.index .ui.header {
+  font-weight: normal;
+}

 #example.index .introduction .buttons {
  margin-top: 3em;
@ -594,7 +609,6 @@ body#example.hide {
 #example.index pre.console {
  height: 120px;
 }
-
 #example .masthead .grid {
  position: relative;
  z-index: 2;
@ -653,6 +667,9 @@ body#example.hide {
 #example.index .stripe .grid .row {
  margin: 2rem 0rem;
 }
+#example.index .feature.stripe p {
+  min-height: 100px;
+}
 #example.index .inverted.stripe {
  background-color: #1B1C1D;
 }
@ -673,6 +690,19 @@ body#example.hide {
  font-size: 2em;
 }

+#example.index .email.stripe {
+  padding: 2em 0em;
+}
+#example.index .email.stripe p {
+  margin: -0.5em 0em 1em;
+}
+#example.index .email.stripe .input {
+  width: 450px;
+}
+#example.index .email.stripe .submit.button {
+  margin-left: 1em;
+}
+
 /* content */
 #example .solid,
 #example .stripe {
--- a/src/definitions/collections/menu.less
+++ b/src/definitions/collections/menu.less
@ -255,7 +255,7 @@
  min-width: ~"calc(100% - 1px)";
  box-shadow: @dropdownBoxShadow;
 }
-.ui.menu .pointing.dropdown.item .menu {
+.ui.menu:not(.secondary) .pointing.dropdown.item .menu {
  margin-top: @dropdownPointingDistance;
  border-top-left-radius: 0em;
  border-top-right-radius: 0em;
--- a/src/definitions/elements/button.less
+++ b/src/definitions/elements/button.less
@ -1141,7 +1141,7 @@
 /* Basic */
 .ui.basic.black.buttons .button,
 .ui.basic.black.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
  color: @textColor !important;
 }
 .ui.basic.black.buttons .button:hover,
@ -1256,7 +1256,7 @@
 /* Basic */
 .ui.basic.blue.buttons .button,
 .ui.basic.blue.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
  color: @textColor !important;
 }
 .ui.basic.blue.buttons .button:hover,
@ -1369,7 +1369,7 @@
 /* Basic */
 .ui.basic.green.buttons .button,
 .ui.basic.green.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
  color: @textColor !important;
 }
 .ui.basic.green.buttons .button:hover,
@ -1481,7 +1481,7 @@
 /* Basic */
 .ui.basic.orange.buttons .button,
 .ui.basic.orange.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
  color: @textColor !important;
 }
 .ui.basic.orange.buttons .button:hover,
@ -1593,7 +1593,7 @@
 /* Basic */
 .ui.basic.pink.buttons .button,
 .ui.basic.pink.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
  color: @textColor !important;
 }
 .ui.basic.pink.buttons .button:hover,
@ -1705,7 +1705,7 @@
 /* Basic */
 .ui.basic.purple.buttons .button,
 .ui.basic.purple.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
  color: @textColor !important;
 }
 .ui.basic.purple.buttons .button:hover,
@ -1817,7 +1817,7 @@
 /* Basic */
 .ui.basic.red.buttons .button,
 .ui.basic.red.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
  color: @textColor !important;
 }
 .ui.basic.red.buttons .button:hover,
@ -1930,7 +1930,7 @@
 /* Basic */
 .ui.basic.teal.buttons .button,
 .ui.basic.teal.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
  color: @textColor !important;
 }
 .ui.basic.teal.buttons .button:hover,
@ -2043,7 +2043,7 @@
 /* Basic */
 .ui.basic.yellow.buttons .button,
 .ui.basic.yellow.button {
-  box-shadow: 0px 0px 0px @basicColoredBorderSize @solidBorderColor inset !important;
+  box-shadow: 0px 0px 0px @basicColoredBorderSize @borderColor inset !important;
  color: @textColor !important;
 }
 .ui.basic.yellow.buttons .button:hover,
--- a/src/definitions/modules/transition.js
+++ b/src/definitions/modules/transition.js
@ -509,6 +509,7 @@ $.fn.transition = function() {
          transition: function() {
            var
              elementClass     = $module.attr('class'),
+              tagName          = $module.prop('tagName'),
              animation        = settings.animation,
              transitionExists = module.get.transitionExists(settings.animation),
              $clone,
@ -518,7 +519,7 @@ $.fn.transition = function() {
            ;
            if( transitionExists === undefined || instance.displayType === undefined) {
              module.verbose('Determining whether animation exists');
-              $clone = $('<div>').addClass( elementClass ).appendTo($('body'));
+              $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
              currentAnimation = $clone
                .removeClass(className.inward)
                .removeClass(className.outward)
@ -536,6 +537,7 @@ $.fn.transition = function() {
                .show()
                .css('display')
              ;
+              console.log($clone, $clone.parent(), $clone.attr('class'), displayType);
              module.verbose('Determining final display state', displayType);
              if(currentAnimation != inAnimation) {
                module.debug('Transition exists for animation', animation);
--- a/src/definitions/modules/transition.less
+++ b/src/definitions/modules/transition.less
@ -41,7 +41,6 @@
 *******************************/

 .animating.transition {
-  display: block !important;
  backface-visibility: @backfaceVisibility;
  transform: @use3DAcceleration;
  visibility: visible !important;