Show/hide sass/css toggle w/fade

gistfile1.txt

.hide
  opacity: 0
  visibility: hidden

// to be added to .hide after init
.hide-ready
  transition: visibility 0s linear 0.4s, opacity 0.4s linear
  -webkit-transition: visibility 0s linear 0.4s, opacity 0.4s linear

.hide-ready.showing
  transition: visibility 0s linear, opacity 0.4s linear
  -webkit-transition: visibility 0s linear, opacity 0.4s linear
  opacity: 1
  visibility: visible









/* or even fancier with zoom (though this had problems on mobile - the layer captured swipes for scrolling) */


.hide-none
	display: none

.hide
	opacity: 0
	visibility: hidden

	-webkit-transform: scale(0.9)
	-moz-transform: scale(0.9)
	transform: scale(0.9)
 
// to be added to .hide after init
.hide-ready
	-webkit-transition: visibility 0s linear 0.4s, opacity 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.770, 0.000, 0.175, 1.000)
	-moz-transition: visibility 0s linear 0.4s, opacity 0.4s linear, -moz-transform 0.4s cubic-bezier(0.770, 0.000, 0.175, 1.000)
	transition: visibility 0s linear 0.4s, opacity 0.4s linear, transform 0.4s cubic-bezier(0.770, 0.000, 0.175, 1.000)
 
.hide-ready.showing
	-webkit-transition: visibility 0s linear, opacity 0.4s linear, -webkit-transform 0.4s cubic-bezier(0.770, 0.000, 0.175, 1.000)
	-moz-transition: visibility 0s linear, opacity 0.4s linear, -moz-transform 0.4s cubic-bezier(0.770, 0.000, 0.175, 1.000)
	transition: visibility 0s linear, opacity 0.4s linear, transform 0.4s cubic-bezier(0.770, 0.000, 0.175, 1.000)
	
	opacity: 1
	visibility: visible

	-webkit-transform: scale(1.0)
	-moz-transform: scale(1.0)
	transform: scale(1.0)