From c80198a1ca02afe969e8d5a15c60b8d301ec5d5b Mon Sep 17 00:00:00 2001
From: Tom Raithel <t.raithel@googlemail.com>
Date: Thu, 16 Feb 2017 08:17:07 +0100
Subject: [PATCH] Move all animation stuff to details page

---
 js/details.js                   | 8 ++++++--
 styles/components/item-list.css | 3 ---
 styles/components/item-page.css | 7 -------
 styles/components/item.css      | 1 -
 templates/item-page.pug         | 6 +++---
 5 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/js/details.js b/js/details.js
index 9cb5f9a..e3b7e10 100644
--- a/js/details.js
+++ b/js/details.js
@@ -54,6 +54,7 @@ const initDetails = (element, fromPjax) => {
       background: createAnimation({
           transform: 'translateX(calc((100vw - 1200px) / 2 + 800px))',
         }, {
+          transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
           transform: 'translateX(0)',
         },
         0
@@ -62,6 +63,7 @@ const initDetails = (element, fromPjax) => {
           transform: 'translateY(-20px)',
           opacity: '0',
         }, {
+          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
           transform: 'translateY(0px)',
           opacity: '1',
         },
@@ -71,16 +73,18 @@ const initDetails = (element, fromPjax) => {
           transform: 'translateY(-20px)',
           opacity: '0',
         }, {
+          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
           transform: 'translateY(0px)',
           opacity: '1',
         },
         600
       ),
       items: items.map((item, i) => (createAnimation({
-          transform: 'translateY(-40px)',
+          transform: 'translateX(-40px)',
           opacity: '0',
         }, {
-          transform: 'translateY(0px)',
+          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
+          transform: 'translateX(0px)',
           opacity: '1',
         },
         200 + 100 * i
diff --git a/styles/components/item-list.css b/styles/components/item-list.css
index bca0f78..bb698d8 100644
--- a/styles/components/item-list.css
+++ b/styles/components/item-list.css
@@ -2,7 +2,4 @@
   &__header {
     margin-bottom: 20px;
   }
-  &__list {
-    
-  }
 }
diff --git a/styles/components/item-page.css b/styles/components/item-page.css
index c810568..9d56ca3 100644
--- a/styles/components/item-page.css
+++ b/styles/components/item-page.css
@@ -26,24 +26,17 @@
       float: right;
       width: 410px;
       padding: 0 40px 0 10px;
-      transition: opacity 150ms ease-out, transform 300ms ease-out;
-      /*&.is-uninitialized {
-        transform: translateY(-20px);
-        opacity: 0;
-      }*/
     }
   }
 
   &__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);
     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;
     }
   }
 }
diff --git a/styles/components/item.css b/styles/components/item.css
index 3eb9a0f..ef59282 100644
--- a/styles/components/item.css
+++ b/styles/components/item.css
@@ -6,7 +6,6 @@
   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);
diff --git a/templates/item-page.pug b/templates/item-page.pug
index 7efed99..775d6c2 100644
--- a/templates/item-page.pug
+++ b/templates/item-page.pug
@@ -8,12 +8,12 @@ block vars
 block content
   .item-page.js--details(data-items=JSON.stringify(itemsInRing))
     .item-page__nav
-      .item-page__nav__inner(v-bind:style="navHeader.style")
-        .item-page__header
+      .item-page__nav__inner
+        .item-page__header(v-bind:style="navHeader.style")
           h3.headline
             = translate(item.quadrant)
         .item-list
-          .item-list__header
+          .item-list__header(v-bind:style="navHeader.style")
             .split
               .split__left
                 span(class=`badge badge--big badge--${item.attributes.ring}`)