Add animation for detail page

README.md

@@ -43,7 +43,7 @@ If an item is overwritten in a new release, the attributes from the new item are
 
 -  [x] Add Icons
 -  [x] Add pjax
--  [ ] Final CSS (Icons, etc)
+-  [ ] Finalize CSS
 -  [ ] Get contents for how-to-use page
 -  [ ] Show item history on details
 -  [ ] Better semantic and SEO

js/details.js

@@ -0,0 +1,52 @@
+import Vue from 'vue';
+import applyPjax from './pjax';
+
+
+const af = (() => {
+  if (!window.requestAnimationFrame) {
+    return (
+      window.webkitRequestAnimationFrame ||
+      window.mozRequestAnimationFrame ||
+      window.oRequestAnimationFrame ||
+      window.msRequestAnimationFrame ||
+      ((callback, element) => {
+        window.setTimeout( callback, 1000 / 60 );
+      })
+    );
+  }
+  return window.requestAnimationFrame;
+})();
+
+const animation = (steps) => {
+  steps.reduce((total, [timeout, step]) => {
+    af(() => {
+      window.setTimeout(step, total + timeout)
+    });
+    return total + timeout;
+  }, 0);
+}
+
+const initDetails = (element, fromPjax) => {
+  console.log('app');
+  // if (fromPjax !== true) {
+  //   return;
+  // }
+
+  element.classList.add('animate');
+  element.classList.add('animate--curtain');
+  element.classList.add('animate--invisible-content');
+  element.classList.add('animate--invisible-nav');
+  animation([
+    [0, () => {
+      element.classList.remove('animate--curtain');
+    }],
+    [350, () => {
+      element.classList.remove('animate--invisible-nav');
+    }],
+    [150, () => {
+      element.classList.remove('animate--invisible-content');
+    }],
+  ])
+};
+
+export default initDetails;

js/radar.js

@@ -1,4 +1,5 @@
 import filter from './filter';
+import details from './details';
 import applyPjax from './pjax';
 
 const enhanceComponent = (selector, enhancer) => {
@@ -8,6 +9,7 @@ const enhanceComponent = (selector, enhancer) => {
 
 const enhanceComponents = () => {
   enhanceComponent('.js--filter', filter);
+  enhanceComponent('.js--details', details);
 }
 
 applyPjax();

styles/components/item-page.css

@@ -21,23 +21,55 @@
 
   &__nav {
     flex: 0 0 calc((100vw - 1200px) / 2 + 400px);
-    /*flex: 0 0 37%;*/
     &__inner {
       box-sizing: border-box;
       float: right;
       width: 410px;
       padding: 0 40px 0 10px;
+      transition: opacity 150ms ease-out, transform 300ms ease-out;
     }
   }
 
   &__content {
+    transform: translate3d(0, 0, 0);
+    transition: transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98);
     flex: 0 0 calc((100vw - 1200px) / 2 + 800px);
-    /*flex: 0 0 calc((100vw - 1200px) / 2);*/
     background: var(--color-white);
     &__inner {
       box-sizing: border-box;
       width: 810px;
       padding: 0 10px 0 100px;
+      transition: opacity 150ms ease-out, transform 300ms ease-out;
+    }
+  }
+
+  &.animate {
+    &--curtain {
+      & .item-page {
+        &__content {
+          transform: translateX(calc((100vw - 1200px) / 2 + 800px));
+        }
+      }
+    }
+    &--invisible-content {
+      & .item-page {
+        &__content {
+          &__inner {
+            transform: translateY(-20px);
+            opacity: 0;
+          }
+        }
+      }
+    }
+    &--invisible-nav {
+      & .item-page {
+        &__nav {
+          &__inner {
+            transform: translateX(-20px);
+            opacity: 0;
+          }
+        }
+      }
     }
   }
 }

templates/item-page.pug

@@ -6,7 +6,7 @@ block vars
   - var title=item.attributes.title
 
 block content
-  .item-page
+  .item-page.js--details
     .item-page__nav
       .item-page__nav__inner
         .item-page__header

templates/layout.pug

@@ -3,7 +3,8 @@ html
   head
     title #{title} - AOE Tech Radar
     link(rel='stylesheet', href='/styles.css')
-  body.js--body
+  body
+    .js--body
       block body
     block scripts
       script(src='/bundle.js')