AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move all animation stuff to details page

Browse Source
This commit is contained in:
Tom Raithel
2017-02-16 08:17:07 +01:00
parent c53e6aa5d3
commit c80198a1ca
5 changed files with 9 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/details.js
View File

@@ -54,6 +54,7 @@ const initDetails = (element, fromPjax) => {
background: createAnimation({ background: createAnimation({
transform: 'translateX(calc((100vw - 1200px) / 2 + 800px))', transform: 'translateX(calc((100vw - 1200px) / 2 + 800px))',
}, { }, {
transition: 'transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98)',
transform: 'translateX(0)', transform: 'translateX(0)',
}, },
0 0
@@ -62,6 +63,7 @@ const initDetails = (element, fromPjax) => {
transform: 'translateY(-20px)', transform: 'translateY(-20px)',
opacity: '0', opacity: '0',
}, { }, {
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateY(0px)', transform: 'translateY(0px)',
opacity: '1', opacity: '1',
}, },
@@ -71,16 +73,18 @@ const initDetails = (element, fromPjax) => {
transform: 'translateY(-20px)', transform: 'translateY(-20px)',
opacity: '0', opacity: '0',
}, { }, {
transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateY(0px)', transform: 'translateY(0px)',
opacity: '1', opacity: '1',
}, },
600 600
), ),
items: items.map((item, i) => (createAnimation({ items: items.map((item, i) => (createAnimation({
transform: 'translateY(-40px)', transform: 'translateX(-40px)',
opacity: '0', opacity: '0',
}, { }, {
transform: 'translateY(0px)', transition: 'opacity 150ms ease-out, transform 300ms ease-out',
transform: 'translateX(0px)',
opacity: '1', opacity: '1',
}, },
200 + 100 * i 200 + 100 * i

3
styles/components/item-list.css
View File

@@ -2,7 +2,4 @@
&__header { &__header {
margin-bottom: 20px; margin-bottom: 20px;
} }
&__list {
}
} }

7
styles/components/item-page.css
View File

@@ -26,24 +26,17 @@
float: right; float: right;
width: 410px; width: 410px;
padding: 0 40px 0 10px; padding: 0 40px 0 10px;
transition: opacity 150ms ease-out, transform 300ms ease-out;
/*&.is-uninitialized {
transform: translateY(-20px);
opacity: 0;
}*/
} }
} }
&__content { &__content {
transform: translate3d(0, 0, 0); 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); flex: 0 0 calc((100vw - 1200px) / 2 + 800px);
background: var(--color-white); background: var(--color-white);
&__inner { &__inner {
box-sizing: border-box; box-sizing: border-box;
width: 810px; width: 810px;
padding: 0 10px 0 100px; padding: 0 10px 0 100px;
transition: opacity 150ms ease-out, transform 300ms ease-out;
} }
} }
} }

1
styles/components/item.css
View File

@@ -6,7 +6,6 @@
transition: background 200ms ease-out; transition: background 200ms ease-out;
color: var(--color-gray-normal); color: var(--color-gray-normal);
box-sizing: border-box; box-sizing: border-box;
transition: opacity 150ms ease-out, transform 300ms ease-out;
&.is-active { &.is-active {
background: var(--color-gray-dark-alt); background: var(--color-gray-dark-alt);

6
templates/item-page.pug
View File

@@ -8,12 +8,12 @@ block vars
block content block content
.item-page.js--details(data-items=JSON.stringify(itemsInRing)) .item-page.js--details(data-items=JSON.stringify(itemsInRing))
.item-page__nav .item-page__nav
.item-page__nav__inner(v-bind:style="navHeader.style") .item-page__nav__inner
.item-page__header .item-page__header(v-bind:style="navHeader.style")
h3.headline h3.headline
= translate(item.quadrant) = translate(item.quadrant)
.item-list .item-list
.item-list__header .item-list__header(v-bind:style="navHeader.style")
.split .split
.split__left .split__left
span(class=`badge badge--big badge--${item.attributes.ring}`) span(class=`badge badge--big badge--${item.attributes.ring}`)