Allow keyframe CSS3 animations and reversal of animations to run on elements styled with display property.
Modern Browsers, Lightweight, Device Friendly, Skeleton Script.
- The need to create lightweight bespoke animation solutions.
- Have an html element hidden on the page using
display:none;(Any method for hiding or displaying an object can be used!) - On an event to
display:block;ordisplay:flex;etc. the element followed by a CSS3 Animation. - Animation to run in reverse or run different animation and then
display:none;at the end of the animation. - Can be used to trigger animation events in general. Showing and hiding elements is optional.
- jQuery Any version of loaded in the page
<head>- v3.2.1 Tested - An SCSS or LESS compiler.
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 versionThe standalone version can be placed in the document <head>
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:
.display- (Optional) The visibility styling of the object using any css method to render it but can be used for anything..animatied- The animation to use when displaying the element..revert- (Optional) The animation to use when hiding the object.
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.
- Google Chrome v59 - v60
- Microsoft Edge v40
- Internet Explorer v11
- Firefox v41
- Opera v46
- Safari v10
- Safari Technology Preview v35
- Google Chrome v59 - v60
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.
Mac Koniarek - Testing browser compatibility on Mac OSX