'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var easing = require('../easing/index.js'); var internal = require('../internal/index.js'); /*! ***************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */ function __rest(s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; } function blur(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicInOut, amount = 5, opacity = 0 } = {}) { const style = getComputedStyle(node); const target_opacity = +style.opacity; const f = style.filter === 'none' ? '' : style.filter; const od = target_opacity * (1 - opacity); return { delay, duration, easing: easing$1, css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);` }; } function fade(node, { delay = 0, duration = 400, easing: easing$1 = easing.linear } = {}) { const o = +getComputedStyle(node).opacity; return { delay, duration, easing: easing$1, css: t => `opacity: ${t * o}` }; } function fly(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicOut, x = 0, y = 0, opacity = 0 } = {}) { const style = getComputedStyle(node); const target_opacity = +style.opacity; const transform = style.transform === 'none' ? '' : style.transform; const od = target_opacity * (1 - opacity); return { delay, duration, easing: easing$1, css: (t, u) => ` transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px); opacity: ${target_opacity - (od * u)}` }; } function slide(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicOut } = {}) { const style = getComputedStyle(node); const opacity = +style.opacity; const height = parseFloat(style.height); const padding_top = parseFloat(style.paddingTop); const padding_bottom = parseFloat(style.paddingBottom); const margin_top = parseFloat(style.marginTop); const margin_bottom = parseFloat(style.marginBottom); const border_top_width = parseFloat(style.borderTopWidth); const border_bottom_width = parseFloat(style.borderBottomWidth); return { delay, duration, easing: easing$1, css: t => 'overflow: hidden;' + `opacity: ${Math.min(t * 20, 1) * opacity};` + `height: ${t * height}px;` + `padding-top: ${t * padding_top}px;` + `padding-bottom: ${t * padding_bottom}px;` + `margin-top: ${t * margin_top}px;` + `margin-bottom: ${t * margin_bottom}px;` + `border-top-width: ${t * border_top_width}px;` + `border-bottom-width: ${t * border_bottom_width}px;` }; } function scale(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicOut, start = 0, opacity = 0 } = {}) { const style = getComputedStyle(node); const target_opacity = +style.opacity; const transform = style.transform === 'none' ? '' : style.transform; const sd = 1 - start; const od = target_opacity * (1 - opacity); return { delay, duration, easing: easing$1, css: (_t, u) => ` transform: ${transform} scale(${1 - (sd * u)}); opacity: ${target_opacity - (od * u)} ` }; } function draw(node, { delay = 0, speed, duration, easing: easing$1 = easing.cubicInOut } = {}) { const len = node.getTotalLength(); if (duration === undefined) { if (speed === undefined) { duration = 800; } else { duration = len / speed; } } else if (typeof duration === 'function') { duration = duration(len); } return { delay, duration, easing: easing$1, css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}` }; } function crossfade(_a) { var { fallback } = _a, defaults = __rest(_a, ["fallback"]); const to_receive = new Map(); const to_send = new Map(); function crossfade(from, node, params) { const { delay = 0, duration = d => Math.sqrt(d) * 30, easing: easing$1 = easing.cubicOut } = internal.assign(internal.assign({}, defaults), params); const to = node.getBoundingClientRect(); const dx = from.left - to.left; const dy = from.top - to.top; const dw = from.width / to.width; const dh = from.height / to.height; const d = Math.sqrt(dx * dx + dy * dy); const style = getComputedStyle(node); const transform = style.transform === 'none' ? '' : style.transform; const opacity = +style.opacity; return { delay, duration: internal.is_function(duration) ? duration(d) : duration, easing: easing$1, css: (t, u) => ` opacity: ${t * opacity}; transform-origin: top left; transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${t + (1 - t) * dh}); ` }; } function transition(items, counterparts, intro) { return (node, params) => { items.set(params.key, { rect: node.getBoundingClientRect() }); return () => { if (counterparts.has(params.key)) { const { rect } = counterparts.get(params.key); counterparts.delete(params.key); return crossfade(rect, node, params); } // if the node is disappearing altogether // (i.e. wasn't claimed by the other list) // then we need to supply an outro items.delete(params.key); return fallback && fallback(node, params, intro); }; }; } return [ transition(to_send, to_receive, false), transition(to_receive, to_send, true) ]; } exports.blur = blur; exports.crossfade = crossfade; exports.draw = draw; exports.fade = fade; exports.fly = fly; exports.scale = scale; exports.slide = slide;