evan/rats-search
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(header): more pleasant animation

Browse Source
This commit is contained in:
Alexey Kasyanchuk 2018-04-10 17:15:28 +03:00
parent fce7fe4369
commit 410c827905
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.css
View File

@ -14,6 +14,10 @@
height: 120px;
}
.header .header-main > div > div > div:nth-child(2) > div > div:nth-child(1) {
transition: 0.5s;
}
.header.sticky .header-main > div > div > div:nth-child(2) > div > div:nth-child(1) {
display: none;
opacity:0;
}

6
src/app/header.js
View File

@ -12,7 +12,7 @@ class Header extends React.Component {
componentDidMount()
{
window.onscroll = () => {
if (window.pageYOffset >= 10)
if (window.pageYOffset >= 15)
{
const scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
@ -159,7 +159,7 @@ class Header extends React.Component {
padding: '15px',
background: `url('${Background}') no-repeat`,
backgroundSize: 'cover',
transition: '0.3s'
transition: '1s'
}}>
<RaisedButton
label="Search"
@ -271,7 +271,7 @@ class Header extends React.Component {
</div>
</CardMedia>
</Card>
<div className='clear-header-space' style={{transition: '0.3s'}} />
<div className='clear-header-space' style={{transition: '1.0s'}} />
</div>
)