Alternare le transizioni CSS manipolando la cronologia del browser

Alternare le transizioni CSS manipolando la cronologia del browser

Quando utilizziamo le transizioni CSS con lo pseudo-elemento :target creiamo un effetto unidirezionale, nel senso che la transizione termina e non può essere reinizializzata in senso opposto in quanto il browser ha già aggiunto l'ancora all'URL della pagina. Vediamo una soluzione.

Abbiamo un menu con un pulsante:


<div id="navigation">
	<ul id="nav">
	  <li><a href="#">Home</a></li>
	  <li><a href="#">About</a></li>
	  <li><a href="#">Contact</a></li>
	</ul>
	<div id="opener">
		<a href="#navigation" class="icon-gear"></a>
	</div>
</div>

Gli stili CSS importanti sono i seguenti:


#navigation {
	height: 3em;
	width: 18em;
	color: #fff;
	position: fixed;
	top: 50%;
	margin-top: -1.5em;
	left: -18em;
	-moz-transition: all 500ms ease-out;
	-webkit-transition: all 500ms ease-out;
	-ms-transition: all 500ms ease-out;
		transition: all 500ms ease-out;
	
}

#navigation:target {
	left: 0;
}

Quando clicchiamo sul pulsante viene aggiunta una nuova entry alla cronologia del browser. Sfruttando la cronologia possiamo invertire la transizione CSS:


var handleMenu = function() {
	var menu = document.getElementById('navigation'),
		opener = document.getElementById('opener'),
		button = opener.getElementsByTagName('a')[0];
	button.addEventListener('click', function() {
		var left = window.getComputedStyle(menu, null).getPropertyValue('left');
		if(parseInt(left) == 0) {
			history.back(); 
		} else {
			history.forward();
		}
	}, false);
};

document.addEventListener('DOMContentLoaded', function() {
	handleMenu();
}, false);

Rimuovendo o aggiungendo l'ancora all'URL della pagina otteniamo l'effetto desiderato.

Torna su