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({
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

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

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

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

@@ -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;
}
}
}

1
styles/components/item.css
View File

@@ -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);

6
templates/item-page.pug
View File

@@ -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}`)