web-animation-club - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/web-animation-club.js

		@@ -92,2 +92,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "beforeFutureCssLayout", function() { return beforeFutureCssLayout; });
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "onceNextCssLayout", function() { return onceNextCssLayout; });
		/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "onceTransitionEnd", function() { return onceTransitionEnd; });
		@@ -154,2 +155,8 @@ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "onceAnimationEnd", function() { return onceAnimationEnd; });

		function onceNextCssLayout() {
		return new Promise(resolve => {
		beforeNextCssLayout(resolve);
		});
		}

		function onceTransitionEnd(element, options = {}) {
		@@ -156,0 +163,0 @@ return new Promise(resolve => {

package.json

		{
		"name": "web-animation-club",
		"version": "0.1.0",
		"version": "0.1.1",
		"description": "Web Animation Club",
		@@ -5,0 +5,0 @@ "repository": "rcaferati/web-animation-club",

README.md

		# web-animation-club

		#### Dist file
		Just load directly in your `HTML` the `web-animation-club.min.js` javascript file located on the `dist` folder.
		```html
		...
		<script src="/path/to/web-animation-club.min.js"></script>
		...
		```

		### Installation
		From the `NPM registry` using npm or yarn just install the `web-animation-club` package.
		```
		@@ -13,10 +22,45 @@ npm install --save web-animation-club
		### Basic Usage
		For all the following examples please consider the following HTML markup.
		```html
		<style>
		.animated {
		transition: transform 0.4s linear;
		}
		.move {
		transform: translateX(100px);
		}
		</style>
		<div class="container">
		<div class="box"></div>
		</div>
		```

		#### HTML with ES5
		```html
		<script src="/path/to/web-animation-club.min.js"></script>
		<script>
		var box = document.querySelector('.box');

		box.classList.add('animated');
		box.classList.add('move');

		onceTransitionEnd(box).then(function() {
		// ... do something
		});
		</script>
		```
		#### Javascript ES6
		```jsx
		import { onceTransitionEnd } from 'web-animation-club';

		const element = document.querySelector('#html-element');

		onceTransitionEnd(element).then(() => {

		const element = document.querySelector('.box');

		// here we're just simulating the addition of a class with some animation/transition
		element.classList.add('animated');
		element.classList.add('move');

		// if you are using the transition css property
		onceTransitionEnd(element).then((event) => {
		// ... do something
		});
		```

src/index.js

		@@ -60,2 +60,8 @@ function recursiveAnimationFrame(frames, callback) {

		export function onceNextCssLayout() {
		return new Promise((resolve) => {
		beforeNextCssLayout(resolve);
		});
		}

		export function onceTransitionEnd(element, options = {}) {
		@@ -62,0 +68,0 @@ return new Promise((resolve) => {

demo/src/components/box-double.scss

Sorry, the diff of this file is not supported yet

New alerts