Add hovering animation

2016-11-26 15:01:09 +09:00
parent e4e40ec7c0
commit 93c76861ed
4 changed files with 33 additions and 1 deletions
--- a/src/browser/components/MainPage.jsx
+++ b/src/browser/components/MainPage.jsx
@@ -1,4 +1,5 @@
 const React = require('react');
+const ReactCSSTransitionGroup = require('react-addons-css-transition-group');
 const {Grid, Row} = require('react-bootstrap');

 const {ipcRenderer, remote} = require('electron');
@@ -274,7 +275,18 @@ const MainPage = React.createClass({
          { tabsRow }
          { viewsRow }
        </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>
    );
  }
--- a/src/browser/css/index.css
+++ b/src/browser/css/index.css
@@ -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;
+}
--- a/src/browser/index.html
+++ b/src/browser/index.html
@@ -4,6 +4,7 @@
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="modules/bootstrap/css/bootstrap.min.css">
+  <link rel="stylesheet" href="css/index.css">
 </head>

 <body>
--- a/src/package.json
+++ b/src/package.json
@@ -21,6 +21,7 @@
    "electron-squirrel-startup": "^1.0.0",
    "os-locale": "^1.4.0",
    "react": "^15.3.0",
+    "react-addons-css-transition-group": "^15.3.0",
    "react-bootstrap": "~0.30.6",
    "react-dom": "^15.3.0",
    "yargs": "^3.32.0"