fix(toolbar): transitions applied too soon before css loaded

- Moved the transitions to a class, had to use nextTick to make sure the app was loaded

fixes #7986

Closes #8738

Author: EladBezalel

src/components/toolbar/toolbar.js

@@ -72,6 +72,10 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate) {
       element.addClass('_md');     // private md component indicator for styling
       $mdTheming(element);
 
+      $mdUtil.nextTick(function () {
+        element.addClass('_md-toolbar-transitions');     // adding toolbar transitions after digest
+      }, false);
+
       if (angular.isDefined(attr.mdScrollShrink)) {
         setupScrollShrink();
       }

src/components/toolbar/toolbar.scss

@@ -30,9 +30,11 @@ md-toolbar {
   min-height: $baseline-grid * 8;
   width: 100%;
 
-  transition-duration: $swift-ease-in-out-duration;
-  transition-timing-function: $swift-ease-in-out-timing-function;
-  transition-property: background-color, fill, color;
+  &._md-toolbar-transitions {
+    transition-duration: $swift-ease-in-out-duration;
+    transition-timing-function: $swift-ease-in-out-timing-function;
+    transition-property: background-color, fill, color;
+  }
 
   &.md-whiteframe-z1-add, &.md-whiteframe-z1-remove {
     transition: box-shadow $swift-ease-in-out-duration linear;