Merge pull request #32 from sirbrillig/add/vanisher

Add `Vanisher` component to animate alert transitions
sirbrillig · Sep 10, 2017 · 8ec1424 · 8ec1424
2 parents aa0afb1 + c68a3d3
commit 8ec1424
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/components/header.js b/components/header.js
@@ -6,6 +6,7 @@ const LastChecked = require( '../components/last-checked' );
 const OfflineNotice = require( '../components/offline-notice' );
 const FetchingInProgress = require( '../components/fetching-in-progress' );
 const createUpdater = require( '../components/updater' );
+const Vanisher = require( '../components/vanisher' );
 const UpdatingLastChecked = createUpdater( LastChecked );
 const UpdatingOfflineNotice = createUpdater( OfflineNotice );
 
@@ -33,8 +34,8 @@ function Header( { openUrl, lastSuccessfulCheck, lastChecked, fetchInterval, sho
 		el( 'div', { className: 'header__secondary' },
 			lastSuccessfulCheck && el( UpdatingLastChecked, { lastSuccessfulCheck } )
 		),
-		offline && el( UpdatingOfflineNotice, { fetchNotifications, lastChecked, fetchInterval } ),
-		fetchingInProgress && el( FetchingInProgress )
+		el( Vanisher, { isVisible: offline }, el( UpdatingOfflineNotice, { fetchNotifications, lastChecked, fetchInterval } ) ),
+		el( Vanisher, { isVisible: fetchingInProgress }, el( FetchingInProgress ) )
 	);
 }
 

diff --git a/components/vanisher.js b/components/vanisher.js
@@ -0,0 +1,9 @@
+const React = require( 'react' );
+const el = React.createElement;
+
+function Vanisher( { isVisible, children } ) {
+	const className = isVisible ? 'vanisher vanisher--visible' : 'vanisher vanisher--invisible';
+	return el( 'div', { className }, children );
+}
+
+module.exports = Vanisher;
diff --git a/index.html b/index.html
@@ -267,6 +267,22 @@
   width: 100%;
   height: 100%;
 }
+
+.vanisher {
+  width: 100%;
+  overflow: hidden;
+  transition: max-height 1s;
+}
+
+.vanisher--visible {
+  max-height: 300px;
+  transition: max-height 1s;
+}
+
+.vanisher--invisible {
+  max-height: 0;
+  transition: max-height 1s;
+}
 		</style>
 	</head>
 	<body>