mirror of
https://github.com/podman-desktop/podman-desktop
synced 2026-04-21 17:47:22 +00:00
4a89ece59f
related to https://github.com/containers/podman-desktop/issues/6372 Signed-off-by: Florent Benoit <fbenoit@redhat.com>
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
/**********************************************************************
|
|
* Copyright (C) 2023-2024 Red Hat, Inc.
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
***********************************************************************/
|
|
|
|
import { cubicOut } from 'svelte/easing';
|
|
|
|
export function fadeSlide(
|
|
node: any,
|
|
{ delay = 0, duration = 400, easing = cubicOut },
|
|
): { delay: number; duration: number; easing: (t: number) => number; css: (t: number) => string } {
|
|
const style = getComputedStyle(node);
|
|
const opacity = +style.opacity;
|
|
const height = parseFloat(style.height);
|
|
const paddingTop = parseFloat(style.paddingTop);
|
|
const paddingBottom = parseFloat(style.paddingBottom);
|
|
|
|
return {
|
|
delay,
|
|
duration,
|
|
easing,
|
|
css: (t: number) =>
|
|
`overflow: hidden;` +
|
|
`opacity: ${Math.min(t, 1) * opacity};` +
|
|
`height: ${t * height}px;` +
|
|
`padding-top: ${t * paddingTop}px;` +
|
|
`padding-bottom: ${t * paddingBottom}px;`,
|
|
};
|
|
}
|