svelte-transitions/index.js

Officially supported transition plugins for Svelte

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function cubicInOut(t) {
  return t < 0.5
    ? 4.0 * t * t * t
    : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0
}

function cubicOut(t) {
  var f = t - 1.0;
  return f * f * f + 1.0
}

function draw(node, params) {
	const len = node.getTotalLength();

	return {
		delay: params.delay,
		duration: params.duration || 800,
		easing: params.easing || cubicInOut,
		css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}`
	};
}

function fade ( node, ref ) {
	var delay = ref.delay; if ( delay === void 0 ) delay = 0;
	var duration = ref.duration; if ( duration === void 0 ) duration = 400;

	var o = +getComputedStyle( node ).opacity;

	return {
		delay: delay,
		duration: duration,
		css: function (t) { return ("opacity: " + (t * o)); }
	};
}

function fly(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 style = getComputedStyle(node);
	var opacity = +style.opacity;
	var transform = style.transform === 'none' ? '' : style.transform;

	return {
		delay: delay,
		duration: duration,
		easing: easing,
		css: function (t) { return ("\n\t\t\ttransform: " + transform + " translate(" + ((1 - t) * x) + "px, " + ((1 - t) * y) + "px);\n\t\t\topacity: " + (t * opacity)); }
	};
}

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.draw = draw;
exports.fade = fade;
exports.fly = fly;
exports.slide = slide;