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