Move all animation stuff to details page

PaperCutSoftware · Feb 16, 2017 · c80198a · c80198a
1 parent c53e6aa
commit c80198a
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 16 deletions.
diff --git 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
@@ -2,7 +2,4 @@
   &__header {
     margin-bottom: 20px;
   }
-  &__list {
-
-  }
 }
diff --git 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
@@ -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
@@ -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}`)