svelte-transitions - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

 # svelte-transitions changelog
 
+## 1.1.0
+
+* Add `fly` and `slide` transitions
+
 ## 1.0.0
 
 * First release

dist/svelte-transitions.js

@@ -20,3 +20,64 @@ (function (global, factory) {
 
+function cubicOut(t) {
+  var f = t - 1.0;
+  return f * f * f + 1.0
+}
+
+function fade$2(
+	node,
+	ref
+) {
+	var delay = ref.delay; if ( delay === void 0 ) delay = 0;
+	var duration = ref.duration; if ( duration === void 0 ) duration = 400;
+	var easing = ref.easing; if ( easing === void 0 ) easing = cubicOut;
+	var x = ref.x; if ( x === void 0 ) x = 0;
+	var y = ref.y; if ( y === void 0 ) y = 0;
+
+	var o = +getComputedStyle(node).opacity;
+
+	return {
+		delay: delay,
+		duration: duration,
+		easing: easing,
+		css: function (t) { return ("transform: translate(" + ((1 - t) * x) + "px, " + ((1 - t) * y) + "px); opacity: " + (t * o)); }
+	};
+}
+
+function slide(
+	node,
+	ref
+) {
+	var delay = ref.delay; if ( delay === void 0 ) delay = 0;
+	var duration = ref.duration; if ( duration === void 0 ) duration = 400;
+	var easing = ref.easing; if ( easing === void 0 ) easing = cubicOut;
+
+	var style = getComputedStyle(node);
+	var opacity = +style.opacity;
+	var height = parseFloat(style.height);
+	var paddingTop = parseFloat(style.paddingTop);
+	var paddingBottom = parseFloat(style.paddingBottom);
+	var marginTop = parseFloat(style.marginTop);
+	var marginBottom = parseFloat(style.marginBottom);
+	var borderTopWidth = parseFloat(style.borderTopWidth);
+	var borderBottomWidth = parseFloat(style.borderBottomWidth);
+
+	return {
+		delay: delay,
+		duration: duration,
+		easing: easing,
+		css: function (t) { return "overflow: hidden;" +
+			"opacity: " + (Math.min(t * 20, 1) * opacity) + ";" +
+			"height: " + (t * height) + "px;" +
+			"padding-top: " + (t * paddingTop) + "px;" +
+			"padding-bottom: " + (t * paddingBottom) + "px;" +
+			"margin-top: " + (t * marginTop) + "px;" +
+			"margin-bottom: " + (t * marginBottom) + "px;" +
+			"border-top-width: " + (t * borderTopWidth) + "px;" +
+			"border-bottom-width: " + (t * borderBottomWidth) + "px;"; }
+	};
+}
+
 exports.fade = fade;
+exports.fly = fade$2;
+exports.slide = slide;
 
@@ -23,0 +84,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

index.js

@@ -18,2 +18,63 @@ 'use strict';
 
+function cubicOut(t) {
+  var f = t - 1.0;
+  return f * f * f + 1.0
+}
+
+function fade$2(
+	node,
+	ref
+) {
+	var delay = ref.delay; if ( delay === void 0 ) delay = 0;
+	var duration = ref.duration; if ( duration === void 0 ) duration = 400;
+	var easing = ref.easing; if ( easing === void 0 ) easing = cubicOut;
+	var x = ref.x; if ( x === void 0 ) x = 0;
+	var y = ref.y; if ( y === void 0 ) y = 0;
+
+	var o = +getComputedStyle(node).opacity;
+
+	return {
+		delay: delay,
+		duration: duration,
+		easing: easing,
+		css: function (t) { return ("transform: translate(" + ((1 - t) * x) + "px, " + ((1 - t) * y) + "px); opacity: " + (t * o)); }
+	};
+}
+
+function slide(
+	node,
+	ref
+) {
+	var delay = ref.delay; if ( delay === void 0 ) delay = 0;
+	var duration = ref.duration; if ( duration === void 0 ) duration = 400;
+	var easing = ref.easing; if ( easing === void 0 ) easing = cubicOut;
+
+	var style = getComputedStyle(node);
+	var opacity = +style.opacity;
+	var height = parseFloat(style.height);
+	var paddingTop = parseFloat(style.paddingTop);
+	var paddingBottom = parseFloat(style.paddingBottom);
+	var marginTop = parseFloat(style.marginTop);
+	var marginBottom = parseFloat(style.marginBottom);
+	var borderTopWidth = parseFloat(style.borderTopWidth);
+	var borderBottomWidth = parseFloat(style.borderBottomWidth);
+
+	return {
+		delay: delay,
+		duration: duration,
+		easing: easing,
+		css: function (t) { return "overflow: hidden;" +
+			"opacity: " + (Math.min(t * 20, 1) * opacity) + ";" +
+			"height: " + (t * height) + "px;" +
+			"padding-top: " + (t * paddingTop) + "px;" +
+			"padding-bottom: " + (t * paddingBottom) + "px;" +
+			"margin-top: " + (t * marginTop) + "px;" +
+			"margin-bottom: " + (t * marginBottom) + "px;" +
+			"border-top-width: " + (t * borderTopWidth) + "px;" +
+			"border-bottom-width: " + (t * borderBottomWidth) + "px;"; }
+	};
+}
+
 exports.fade = fade;
+exports.fly = fade$2;
+exports.slide = slide;

module.js

@@ -1,1 +0,3 @@
-export { default as fade } from 'svelte-transitions-fade';
+export { default as fade } from 'svelte-transitions-fade';
+export { default as fly } from 'svelte-transitions-fly';
+export { default as slide } from 'svelte-transitions-slide';

package.json

 {
   "name": "svelte-transitions",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Officially supported transition plugins for Svelte",
@@ -41,4 +41,6 @@ "main": "index.js",
   "dependencies": {
-    "svelte-transitions-fade": "^1.0.0"
+    "svelte-transitions-fade": "^1.0.0",
+    "svelte-transitions-fly": "^1.0.1",
+    "svelte-transitions-slide": "^1.0.0"
   }
 }

README.md

 # svelte-transitions
 
-Officially supported transition plugin for [Svelte](https://svelte.technology). Includes the following:
+Officially supported transitions plugin for [Svelte](https://svelte.technology). Includes the following:
 
 * [fade](https://github.com/sveltejs/svelte-transitions-fade)
+* [fly](https://github.com/sveltejs/svelte-transitions-fly)
+* [slide](https://github.com/sveltejs/svelte-transitions-slide)
 
@@ -7,0 +9,0 @@ ## Usage

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8751

increased by89.79%

Lines of code

141

increased by354.84%

Number of lines in readme file

50

increased by4.17%

Worsened metrics

Dependency count

3

increased by200%

Dependency changes

• + Addedsvelte-transitions-fly@^1.0.1

• + Addedsvelte-transitions-slide@^1.0.0

• + Addedeases-jsnext@1.0.10(transitive)

• + Addedsvelte-transitions-fly@1.0.4(transitive)

• + Addedsvelte-transitions-slide@1.0.0(transitive)