replace rv-show with rv-transition.

client/css/styles.css

@@ -25,6 +25,19 @@
     src: url('../fonts/Angelface.otf');
 }
 
+.hidden {
+    display: none;
+}
+
+.transition {
+    opacity: 0;
+    transition: ease 200ms opacity;
+}
+
+.transition.show {
+    opacity: 1;
+}
+
 body {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

client/index.html

@@ -54,7 +54,7 @@
         </nav>
     </div>
 
-    <section id="empresa" rv-show="selectedSection.empresa">
+    <section id="empresa" rv-transition="selectedSection.empresa">
         <div class="us section">
             <div class="container">
                 <div class="row">
@@ -123,7 +123,7 @@
         </div>
     </section>
 
-    <section id="productos" rv-show="selectedSection.productos">
+    <section id="productos" rv-transition="selectedSection.productos">
         <div class="products section">
             <div class="container">
                 <div class="row">
@@ -182,8 +182,8 @@
             </div>
         </div>
     </section>-->
+    <script src="./js/binders.js" type="text/javascript"></script>
     <script src="./js/app.js" type="text/javascript"></script>
-
 </body>
 
 </html>

client/js/app.js

@@ -72,14 +72,6 @@ var productCategories_ = [];
 
 var app = document.getElementById('app');
 
-rivets.binders['src-strict'] = function(el, value) {
-    var img = new Image()
-    img.onload = function() {
-        $(el).attr('src', value)
-    }
-    img.src = value
-}
-
 var data = {
     allProducts: {},
     products: [],

client/js/binders.js

@@ -0,0 +1,22 @@
+rivets.binders['src-strict'] = function(el, value) {
+    var img = new Image()
+    img.onload = function() {
+        $(el).attr('src', value)
+    }
+    img.src = value
+}
+
+rivets.binders['transition'] = function(el, value) {
+    el.classList.add('transition');
+    if (value) {
+        el.classList.remove('hidden');
+        setTimeout(function() {
+            el.classList.add('show');
+        }, 100);
+    } else {
+        el.classList.remove('show');
+        setTimeout(function() {
+            el.classList.add('hidden');
+        }, 250);
+    }
+}