From c53e6aa5d3bb8b978ba44d4474b704e8ef7e3b4b Mon Sep 17 00:00:00 2001 From: Tom Raithel Date: Wed, 15 Feb 2017 21:08:48 +0100 Subject: [PATCH] Change animations --- js/details.js | 94 +++++++++++++++++++++++------- static-pages/overview.pug | 2 +- styles/components/item-page.css | 34 ++--------- styles/components/item.css | 10 +--- styles/components/letter-index.css | 5 +- styles/components/split.css | 4 ++ templates/item-page.pug | 16 +++-- 7 files changed, 99 insertions(+), 66 deletions(-) diff --git a/js/details.js b/js/details.js index 51602b9..9cb5f9a 100644 --- a/js/details.js +++ b/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; diff --git a/static-pages/overview.pug b/static-pages/overview.pug index ac8b06d..5b30a66 100644 --- a/static-pages/overview.pug +++ b/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 diff --git a/styles/components/item-page.css b/styles/components/item-page.css index 8eba8cf..c810568 100644 --- a/styles/components/item-page.css +++ b/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; - } - } - } - } - } } diff --git a/styles/components/item.css b/styles/components/item.css index d6e57c5..3eb9a0f 100644 --- a/styles/components/item.css +++ b/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 { diff --git a/styles/components/letter-index.css b/styles/components/letter-index.css index d2175ae..0fb5053 100644 --- a/styles/components/letter-index.css +++ b/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; } } diff --git a/styles/components/split.css b/styles/components/split.css index 8eb4d6c..6050272 100644 --- a/styles/components/split.css +++ b/styles/components/split.css @@ -7,6 +7,10 @@ align-items: flex-start; } + &--overview { + min-height: 40px; + } + &__left { flex: 0 1 auto; } diff --git a/templates/item-page.pug b/templates/item-page.pug index d8876af..7efed99 100644 --- a/templates/item-page.pug +++ b/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