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

Add animation for detail page

Browse Source
This commit is contained in:
Tom Raithel
2017-02-14 23:23:26 +01:00
parent 1b67e9725d
commit 335e01f5e1
6 changed files with 93 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,23 +21,55 @@
&__nav {
flex: 0 0 calc((100vw - 1200px) / 2 + 400px);
/*flex: 0 0 37%;*/
&__inner {
box-sizing: border-box;
float: right;
width: 410px;
padding: 0 40px 0 10px;
transition: opacity 150ms ease-out, transform 300ms ease-out;
}
}
&__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);
/*flex: 0 0 calc((100vw - 1200px) / 2);*/
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;
}
}
&.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;
}
}
}
}
}
}