Simple fade in animation with more toderp stuff

dist/ionic-ios7.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
 * Adapted from normalize.css and some reset.css. We don't care even one
 * bit about old IE, so we don't need any hacks for that in here.
@@ -181,7 +182,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1773,7 +1774,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333;
+  outline: thin dotted #333333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -1860,7 +1861,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, .05s; }
+  transition-delay: 0s, 0.05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1875,7 +1876,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: .05s, 0s; }
+    transition-delay: 0.05s, 0s; }
 
 /* hide a radio button's icon by default */
 .radio-item [class^="icon-"],
@@ -2052,7 +2053,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px #fff;
+      text-shadow: 0px 0px 10px white;
       box-shadow: none;
       background: none; }
 
@@ -2235,7 +2236,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #ddd; }
+  border: 1px solid #dddddd; }
 
 .card-header {
   padding: 10px;
@@ -2271,8 +2272,8 @@ a.button {
 }
 */
 .slide-in-up.enter {
-  -webkit-transition: -webkit-transform .4s, opacity .4s;
+  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-  transition: transform .4s, opacity .4s;
+  transition: transform 0.4s, opacity 0.4s;
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
@@ -2280,8 +2281,28 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 .slide-in-up.leave {
-  -webkit-transition: -webkit-transform .25s, opacity .25s;
+  -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
-  transition: transform .25s, opacity .25s; }
+  transition: transform 0.25s, opacity 0.25s; }
 .slide-in-up.leave-active {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0); }
+
+@keyframes fadein {
+  from {
+    opacity: 0; }
+
+  to {
+    opacity: 1; } }
+
+@-webkit-keyframes fadein {
+  /* Safari and Chrome */
+  from {
+    opacity: 0; }
+
+  to {
+    opacity: 1; } }
+
+.fade-in {
+  opacity: 0;
+  animation: fadein 0.5s;
+  -webkit-animation: fadein 0.5s; }

dist/ionic.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @font-face {
   font-family: 'ionicon-test';
   src: url("fonts/ionicon-test.eot");
@@ -246,7 +247,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1831,7 +1832,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333;
+  outline: thin dotted #333333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -2104,7 +2105,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px #fff;
+      text-shadow: 0px 0px 10px white;
       box-shadow: none;
       background: none; }
 
@@ -2287,7 +2288,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #ddd; }
+  border: 1px solid #dddddd; }
 
 .card-header {
   padding: 10px;
@@ -2323,8 +2324,8 @@ a.button {
 }
 */
 .slide-in-up.enter {
-  -webkit-transition: -webkit-transform .4s, opacity .4s;
+  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
-  transition: transform .4s, opacity .4s;
+  transition: transform 0.4s, opacity 0.4s;
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
@@ -2332,12 +2333,32 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); }
 .slide-in-up.leave {
-  -webkit-transition: -webkit-transform .25s, opacity .25s;
+  -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
-  transition: transform .25s, opacity .25s; }
+  transition: transform 0.25s, opacity 0.25s; }
 .slide-in-up.leave-active {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0); }
 
+@keyframes fadein {
+  from {
+    opacity: 0; }
+
+  to {
+    opacity: 1; } }
+
+@-webkit-keyframes fadein {
+  /* Safari and Chrome */
+  from {
+    opacity: 0; }
+
+  to {
+    opacity: 1; } }
+
+.fade-in {
+  opacity: 0;
+  animation: fadein 0.5s;
+  -webkit-animation: fadein 0.5s; }
+
 .platform-ios7 .bar-header {
   height: 64px; }
   .platform-ios7 .bar-header > * {

example/toderp2/css/app.css

@@ -0,0 +1,20 @@
+.view {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.ionic-logo {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -128px;
+  margin-left: -128px;
+  width: 256px;
+}
+#splash-view {
+  opacity: 1;
+}
+#splash-view .ionic-logo {
+}

example/toderp2/index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" href="../../dist/ionic.css">
-    <link rel="stylesheet" href="app.css">
+    <link rel="stylesheet" href="css/app.css">
     
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-mocks.js"></script>
@@ -36,26 +36,26 @@
 
     <!-- Splash -->
     <script id="splash.html" type="text/ng-template">
-      <div class="view" nav-content>
+      <div id="splash-view" class="view fade-in" nav-content>
-        <h1>Toderp</h1>
+        <img src="img/ionic.png" class="ionic-logo">
       </div>
     </script>
 
     <!-- Login -->
     <script id="login.html" type="text/ng-template">
-      <div class="view" nav-content ng-controller="LoginCtrl">
+      <div id="login-view" class="view" nav-content ng-controller="LoginCtrl">
         <h1>Login</h1>
       </div>
     </script>
 
     <!-- Signup -->
     <script id="signup.html" type="text/ng-template">
-      <div class="view" nav-content ng-controller="SignupCtrl"></div>
+      <div id="signup-view" class="view" nav-content ng-controller="SignupCtrl"></div>
     </script>
 
     <!-- Tasks -->
     <script id="tasks.html" type="text/ng-template">
-      <side-menu-ctrl nav-content class="view" ng-controller="TasksCtrl">
+      <side-menu-ctrl id="tasks-view" nav-content class="view" ng-controller="TasksCtrl">
         <div class="full-section" side-menu-content>
           <header class="bar bar-header bar-dark">
             <a href="#" class="button"><i class="icon-reorder"></i></a>

example/toderp2/js/controllers.js

@@ -5,9 +5,9 @@ angular.module('ionic.todo.controllers', ['ionic.todo', 'firebase'])
   $scope.candy = 'yes';
 
   $scope.navController.pushFromTemplate('splash.html');
-  $scope.navController.pushFromTemplate('login.html');
+  //$scope.navController.pushFromTemplate('login.html');
-  $scope.navController.pushFromTemplate('signup.html');
+  //$scope.navController.pushFromTemplate('signup.html');
-  $scope.navController.pushFromTemplate('tasks.html');
+  //$scope.navController.pushFromTemplate('tasks.html');
 
   console.log($scope);
   $rootScope.$on('angularFireAuth:login', function(evt, user) {

scss/ionic/_animations.scss

@@ -37,3 +37,18 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
             transform: translate3d(0, 100%, 0);
   }
 }
+
+@keyframes fadein {
+    from { opacity:0; }
+    to { opacity:1; }
+}
+@-webkit-keyframes fadein { /* Safari and Chrome */
+    from { opacity:0; }
+    to { opacity:1; }
+}
+
+.fade-in {
+  opacity: 0;
+  animation: fadein 0.5s;
+  -webkit-animation: fadein 0.5s;
+}