phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add hovering animation

Browse Source
This commit is contained in:
Yuya Ochiai
2016-11-26 15:01:09 +09:00
parent e4e40ec7c0
commit 93c76861ed
4 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/browser/components/MainPage.jsx
View File

@@ -1,4 +1,5 @@
const React = require('react'); const React = require('react');
const ReactCSSTransitionGroup = require('react-addons-css-transition-group');
const {Grid, Row} = require('react-bootstrap'); const {Grid, Row} = require('react-bootstrap');
const {ipcRenderer, remote} = require('electron'); const {ipcRenderer, remote} = require('electron');
@@ -274,7 +275,18 @@ const MainPage = React.createClass({
{ tabsRow } { tabsRow }
{ viewsRow } { viewsRow }
</Grid> </Grid>
<HoveringURL targetURL={this.state.targetURL}/> <ReactCSSTransitionGroup
transitionName='hovering'
transitionEnterTimeout={300}
transitionLeaveTimeout={500}
>
{ (this.state.targetURL === '') ?
null :
<HoveringURL
key='hoveringURL'
targetURL={this.state.targetURL}
/> }
</ReactCSSTransitionGroup>
</div> </div>
); );
} }

18
src/browser/css/index.css Normal file
View File

@@ -0,0 +1,18 @@
.hovering-enter {
opacity: 0.01;
}
.hovering-enter.hovering-enter-active {
opacity: 1;
transition: opacity 300ms ease-in-out;
}
.hovering-leave {
opacity: 1;
}
.hovering-leave.hovering-leave-active {
opacity: 0.01;
transition: opacity 500ms ease-in-out;
}

1
src/browser/index.html
View File

@@ -4,6 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="modules/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="modules/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
</head> </head>
<body> <body>

1
src/package.json
View File

@@ -21,6 +21,7 @@
"electron-squirrel-startup": "^1.0.0", "electron-squirrel-startup": "^1.0.0",
"os-locale": "^1.4.0", "os-locale": "^1.4.0",
"react": "^15.3.0", "react": "^15.3.0",
"react-addons-css-transition-group": "^15.3.0",
"react-bootstrap": "~0.30.6", "react-bootstrap": "~0.30.6",
"react-dom": "^15.3.0", "react-dom": "^15.3.0",
"yargs": "^3.32.0" "yargs": "^3.32.0"