diff --git a/cosmoz-bottom-bar.html.js b/cosmoz-bottom-bar.html.js
index 56f445a..4bd58f7 100644
--- a/cosmoz-bottom-bar.html.js
+++ b/cosmoz-bottom-bar.html.js
@@ -10,7 +10,6 @@ export default html`
 			width: 100%;
 			max-width: 100%; /* Firefox fix */
 			background-color: inherit;
-			transition: max-height 0.3s ease;
 			flex: none;
 			background-color: var(
 				--cosmoz-bottom-bar-bg-color,
@@ -32,9 +31,6 @@ export default html`
 				padding: 0;
 			};
 		}
-		:host([force-open]) {
-			transition: none;
-		}
 		[hidden],
 		::slotted([hidden]) {
 			display: none !important;
diff --git a/cosmoz-bottom-bar.js b/cosmoz-bottom-bar.js
index 6dbb800..399a295 100644
--- a/cosmoz-bottom-bar.js
+++ b/cosmoz-bottom-bar.js
@@ -1,3 +1,4 @@
+/* eslint-disable max-statements */
 /* eslint-disable max-lines */
 import {
 	PolymerElement,
@@ -371,31 +372,28 @@ class CosmozBottomBar extends PolymerElement {
 	}
 
 	_showHideBottomBar(visible) {
-		this.style.transitionDuration = 0;
-		this.style.display = '';
+		const bar = this.shadowRoot.querySelector('#bar');
+		const info = this.shadowRoot.querySelector('#bar #info');
+
 		this.style.maxHeight = '';
+		bar.style.opacity = '';
+		info.style.visibility = '';
 
 		const height = this.computedBarHeight,
-			to = !visible ? '0px' : height + 'px';
-
-		let from = visible ? '0px' : height + 'px';
+			to = !visible ? '0px' : height + 'px',
+			opacityTo = !visible ? '0' : '1';
 
-		if (!this[rendered]) {
-			from = to;
-			this[rendered] = true;
-		}
+		const from = visible ? '0px' : height + 'px',
+			opacityFrom = visible ? '0' : '1';
 
 		this.style.maxHeight = from;
+		bar.style.opacity = opacityFrom;
+		info.style.visibility = 'hidden';
 
-		const onEnd = () => {
-			this.removeEventListener('transitionend', onEnd);
-			this.style.maxHeight = '';
-			this.style.display = this.visible ? '' : 'none';
-		};
-		requestAnimationFrame(() => {
-			this.addEventListener('transitionend', onEnd);
-			this.style.transitionDuration = '';
+		document.startViewTransition(() => {
 			this.style.maxHeight = to;
+			bar.style.opacity = opacityTo;
+			info.style.visibility = 'visible';
 		});
 	}
 }