Add animation for detail page

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();