https://github.com/marcnewton/toggle-display-animate
Support CSS3 Animations from objects styled with display:none.
https://github.com/marcnewton/toggle-display-animate
css3-animations javascript transition-animation
Last synced: 3 months ago
JSON representation
Support CSS3 Animations from objects styled with display:none.
- Host: GitHub
- URL: https://github.com/marcnewton/toggle-display-animate
- Owner: marcnewton
- License: gpl-3.0
- Created: 2017-07-15T09:02:03.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-12-07T16:03:33.000Z (over 4 years ago)
- Last Synced: 2025-02-12T10:30:32.818Z (5 months ago)
- Topics: css3-animations, javascript, transition-animation
- Language: SCSS
- Homepage:
- Size: 130 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/marcnewton/Toggle-Display-Animate/issues)
---
## Usage Case
- 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;` or `display: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.
---
## Dependencies
- [jQuery](http://jquery.com/download/) Any version of loaded in the page `` - _v3.2.1 Tested_
- An SCSS or LESS compiler.
---
## 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**
```html
```
Place the jQuery Extension script before the closing `` tag or after jQuery.
---
**JavaScript Standalone**
```markdown
TODO - Create pure standalone javascript version
```
The standalone version can be placed in the document ``
---
## 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:
* `.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**
````html
````
**Creating a key frame (LESS)**
```css
.keyframes(myAnimation;{
0% {
opacity:0;
}
100% {
opacity:1;
}
});
```
**Applying Animation to element (LESS)**
```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)**
```scss
@include keyframes(myAnimation) {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
```
**Applying Animation to element (SCSS)**
```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**
```js
$(document).ready(function () {
$('#my-element').toggleDisplayAnimate();
});
```
`toggleDisplayAnimate` toggles the `.display` class on the element.
Functionality is similar to [jQuery.toggleClass](http://api.jquery.com/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
- *Google Chrome* v59 - v60
- *Microsoft Edge* v40
- *Internet Explorer* v11
- *Firefox* v41
- *Opera* v46
### Mac OSX
- *Safari* v10
- *Safari Technology Preview* v35
### Android 6.0.1
- *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.
---
## Special Thanks
[Mac Koniarek](https://github.com/d0hn) - Testing browser compatibility on Mac OSX