scss 使用IE 8支持动画/转换菜单

Posted 2021-05-18

# an animatable menu with gracefull IE 8 support

long story short: 

- you can easily animate/transition the `height` and also the `opacity` of the menu, which gives it a nice _fade'n'slide_ entrance.
- IE does not understand transitions or opacity, and depending on your setup, just the `height: 0` wouldn't suffice (i.e. when you have negative margins…), so we go for `visibility` here, which does the – non animated – trick.
- you absoluteley _need_ to do transition on `visibility` as well, otherwise the menu would just _pop_ in or out of view.
- if you _do not_ need to support IE 8, then forget about `visibility`, as IE 9 understands `opacity`, but doesn't understand transitions – which is fine.

$( ".your-button-class" ).bind( "click", function( event ) {
	$( ".your-menu-class" ).toggleClass( 'isVisible' );
});

.your-menu-class {
	height: 0;
	margin-bottom: 32px;
	margin-top: -8px;
	opacity: 0;
	position: relative;
	transition: height 0.7s ease-in-out, opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
	visibility: hidden; // used by IE
	width: 100%;

	&.isVisible {
		height: 114px;
		opacity: 1;
		visibility: visible; // used by IE
	}