Change animations

js/details.js

@@ -18,34 +18,88 @@ const af = (() => {
 })();
 
 const animation = (steps) => {
-  steps.reduce((total, [timeout, step]) => {
+  steps.map(([timeout, step]) => {
     af(() => {
-      window.setTimeout(step, total + timeout)
+      window.setTimeout(step, timeout)
+    });
   });
-    return total + timeout;
-  }, 0);
 }
 
+const createAnimation = (stateA, stateB, delay) => ({
+  style: stateA,
+  prepare(target) {
+    this.style = stateA;
+  },
+  run(target) {
+    af(() => {
+      window.setTimeout(() => {
+        this.style = stateB;
+      }, delay)
+    });
+  },
+});
+
 const initDetails = (element, fromPjax) => {
-  if (fromPjax !== true) {
+
+  if(!fromPjax) {
     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');
-    }],
-  ])
+  const items = JSON.parse(element.getAttribute('data-items'));
+
+  const details = new Vue({
+    el: element,
+    template: element.outerHTML,
+    data: {
+      background: createAnimation({
+          transform: 'translateX(calc((100vw - 1200px) / 2 + 800px))',
+        }, {
+          transform: 'translateX(0)',
+        },
+        0
+      ),
+      navHeader: createAnimation({
+          transform: 'translateY(-20px)',
+          opacity: '0',
+        }, {
+          transform: 'translateY(0px)',
+          opacity: '1',
+        },
+        300
+      ),
+      text: createAnimation({
+          transform: 'translateY(-20px)',
+          opacity: '0',
+        }, {
+          transform: 'translateY(0px)',
+          opacity: '1',
+        },
+        600
+      ),
+      items: items.map((item, i) => (createAnimation({
+          transform: 'translateY(-40px)',
+          opacity: '0',
+        }, {
+          transform: 'translateY(0px)',
+          opacity: '1',
+        },
+        200 + 100 * i
+      )))
+    },
+    methods: {
+      createAnimation
+    },
+    mounted() {
+      applyPjax();
+      this.background.run();
+      this.navHeader.run();
+      this.text.run();
+      this.items.map(item => item.run());
+    },
+    updated() {
+      applyPjax();
+    },
+  });
 };
 
 export default initDetails;

static-pages/overview.pug

@@ -41,7 +41,7 @@ block content
                     href=`/${item.quadrant}/${item.name}.html`
                     v-if=`isRingVisible('${item.attributes.ring}')`
                   )
-                    .split.split--align-top
+                    .split.split--overview
                       .split__left
                         .item__title
                           = item.attributes.title

styles/components/item-page.css

@@ -27,6 +27,10 @@
       width: 410px;
       padding: 0 40px 0 10px;
       transition: opacity 150ms ease-out, transform 300ms ease-out;
+      /*&.is-uninitialized {
+        transform: translateY(-20px);
+        opacity: 0;
+      }*/
     }
   }
 
@@ -42,34 +46,4 @@
       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;
-          }
-        }
-      }
-    }
-  }
 }

styles/components/item.css

@@ -5,6 +5,8 @@
   text-decoration: none;
   transition: background 200ms ease-out;
   color: var(--color-gray-normal);
+  box-sizing: border-box;
+  transition: opacity 150ms ease-out, transform 300ms ease-out;
 
   &.is-active {
     background: var(--color-gray-dark-alt);
@@ -19,14 +21,8 @@
   }
 
   &--big {
+    min-height: 80px;
     padding: 20px 10px;
-    /*&:hover {
-      background: transparent;
-
-      & .item__title {
-        text-decoration: underline;
-      }
-    }*/
   }
 
   &--no-leading-border {

styles/components/letter-index.css

@@ -4,13 +4,14 @@
     border-top: 1px solid var(--color-gray-normal);
     position: relative;
     padding: 0 0 0 200px;
-    min-height: 100px;
+    min-height: 80px;
   }
   &__letter {
     font-size: 50px;
+    line-height: 80px;
     color: var(--color-gray-normal);
     position: absolute;
     left: 50px;
-    top: 10px;
+    top: 0;
   }
 }

styles/components/split.css

@@ -7,6 +7,10 @@
     align-items: flex-start;
   }
 
+  &--overview {
+    min-height: 40px;
+  }
+
   &__left {
     flex: 0 1 auto;
   }

templates/item-page.pug

@@ -6,9 +6,9 @@ block vars
   - var title=item.attributes.title
 
 block content
-  .item-page.js--details
+  .item-page.js--details(data-items=JSON.stringify(itemsInRing))
     .item-page__nav
-      .item-page__nav__inner
+      .item-page__nav__inner(v-bind:style="navHeader.style")
         .item-page__header
           h3.headline
             = translate(item.quadrant)
@@ -23,13 +23,17 @@ block content
                   span.icon.icon--pie.icon-link__icon
                   | Quadrant Overview
           .item-list__list
-            each ringItem in itemsInRing
-              a.item(class=`${ringItem.name === item.name ? 'is-active' : ''}` href=`/${ringItem.quadrant}/${ringItem.name}.html`)
+            each ringItem, i in itemsInRing
+              a.item(
+                class=`${ringItem.name === item.name ? 'is-active' : ''}`
+                href=`/${ringItem.quadrant}/${ringItem.name}.html`
+                v-bind:style=`items[${i}].style`
+              )
                 .item__title= ringItem.attributes.title
                 if ringItem.attributes.info
                   .item__info= ringItem.attributes.info
-    .item-page__content
-      .item-page__content__inner
+    .item-page__content(v-bind:style="background.style")
+      .item-page__content__inner(v-bind:style="text.style")
         .item-page__header
           .split
             .split__left