From 93c76861ed37f88a9e8e41de02431f822f232cf3 Mon Sep 17 00:00:00 2001 From: Yuya Ochiai Date: Sat, 26 Nov 2016 15:01:09 +0900 Subject: [PATCH] Add hovering animation --- src/browser/components/MainPage.jsx | 14 +++++++++++++- src/browser/css/index.css | 18 ++++++++++++++++++ src/browser/index.html | 1 + src/package.json | 1 + 4 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 src/browser/css/index.css diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx index 5bc025c9..b1a6a6e4 100644 --- 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 } - + + { (this.state.targetURL === '') ? + null : + } + ); } diff --git a/src/browser/css/index.css b/src/browser/css/index.css new file mode 100644 index 00000000..b0c13b5b --- /dev/null +++ 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; +} diff --git a/src/browser/index.html b/src/browser/index.html index 61900980..99cb3b8f 100644 --- a/src/browser/index.html +++ b/src/browser/index.html @@ -4,6 +4,7 @@ + diff --git a/src/package.json b/src/package.json index dc2dac09..0a9e3b3b 100644 --- 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"