Toggle Display CSS3 Animation

Allow keyframe CSS3 animations and reversal of animations to run on elements styled with display property.

Modern Browsers, Lightweight, Device Friendly, Skeleton Script.

View Project Tasks

Usage Case

Dependencies

Quick Installation

Only required file from the project is js/jquery-toggleDisplayAnimate.js Use of the mixins FROM less or scss folder is optional but recommended. jQuery Extension

<script type="application/javascript" src="js/jquery-toggleDisplayAnimate.js"></script>

Place the jQuery Extension script before the closing <body> tag or after jQuery.

JavaScript Standalone

TODO - Create pure standalone javascript version

The standalone version can be placed in the document <head>

Creating Animations

Example below uses import/animation/mixins; helps you to write cross browser compatible animations.

There are 3 special css class names used for the functionality:

HTML Markup

<div id="my-element"></div>

Creating a key frame (LESS)

.keyframes(myAnimation;{
	0% {
		opacity:0;
	}

	100% {
		opacity:1;
	}
});

Applying Animation to element (LESS)

#my-element {

    display:none;

	&.animated {
		.animation('myAnimation');
		.animation-duration(0.5s);
	}

	&.revert {
		.animation('myAnimation');
		.animation-duration(0.3s);
		.animation-direction(reverse);
	}

	&.display {
		display:flex;
	}
}

Creating a key frame (SCSS)

@include keyframes(myAnimation) {
	0% {
		opacity:0;
	}

	100% {
		opacity:1;
	}
}

Applying Animation to element (SCSS)

#my-element {

    display:none;

	&.animated {
		@include animation(myAnimation);
		@include animation-duration(0.5s);
	}

	&.revert {
		@include animation(myAnimation);
		@include animation-duration(0.3s);
		@include animation-direction(reverse);
	}

	&.display {
		display:flex;
	}
}

Trigger an animation

$(document).ready(function () {
    $('#my-element').toggleDisplayAnimate();
});

toggleDisplayAnimate toggles the .display class on the element. Functionality is similar to jQuery.toggleClass.

It would be good to note at this point that since we are using class toggles only, it is possible to remedy other uses for .display and .revet other than to toggle element visibility. You are only limited by you imagination

If triggered again before the animation is complete with .revert set and using reverse direction then the animation will stop and run backwards from its current keyframe position.

If .revert is not set, the animation stops and the css styles in class .display are dropped from the element.

Tested browsers

Windows

Mac OSX

Android 6.0.1

If a browser does not support CSS3 Animations then the elements will simply toggle their display state only with no animation.

There is no plan to create fallback Javascript based animations, There are other heavy weight projects this script is intended for modern browsers only.

Special Thanks

Mac Koniarek - Testing browser compatibility on Mac OSX