Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-11 00:05:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix more transitions

Browse Source
This commit is contained in:
Jelle van Snik 2023-02-07 20:03:01 +01:00
parent 6224fb32c4
commit 3b4e9ce2ca
1 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/Transition.tsx
View File

@ -1,4 +1,4 @@
import { ReactNode } from "react"; import { Fragment, ReactNode } from "react";
import { import {
Transition as HeadlessTransition, Transition as HeadlessTransition,
TransitionClasses, TransitionClasses,
@ -16,15 +16,14 @@ interface Props {
function getClasses( function getClasses(
animation: TransitionAnimations, animation: TransitionAnimations,
extraClasses: string,
duration: string duration: string
): TransitionClasses { ): TransitionClasses {
if (animation === "slide-down") { if (animation === "slide-down") {
return { return {
leave: `transition-[transform,opacity] ${duration} ${extraClasses}`, leave: `transition-[transform,opacity] ${duration}`,
leaveFrom: "opacity-100 translate-y-0", leaveFrom: "opacity-100 translate-y-0",
leaveTo: "-translate-y-4 opacity-0", leaveTo: "-translate-y-4 opacity-0",
enter: `transition-[transform,opacity] ${duration} ${extraClasses}`, enter: `transition-[transform,opacity] ${duration}`,
enterFrom: "opacity-0 -translate-y-4", enterFrom: "opacity-0 -translate-y-4",
enterTo: "translate-y-0 opacity-100", enterTo: "translate-y-0 opacity-100",
}; };
@ -32,10 +31,10 @@ function getClasses(
if (animation === "slide-up") { if (animation === "slide-up") {
return { return {
leave: `transition-[transform,opacity] ${duration} ${extraClasses}`, leave: `transition-[transform,opacity] ${duration}`,
leaveFrom: "opacity-100 translate-y-0", leaveFrom: "opacity-100 translate-y-0",
leaveTo: "translate-y-4 opacity-0", leaveTo: "translate-y-4 opacity-0",
enter: `transition-[transform,opacity] ${duration} ${extraClasses}`, enter: `transition-[transform,opacity] ${duration}`,
enterFrom: "opacity-0 translate-y-4", enterFrom: "opacity-0 translate-y-4",
enterTo: "translate-y-0 opacity-100", enterTo: "translate-y-0 opacity-100",
}; };
@ -43,10 +42,10 @@ function getClasses(
if (animation === "fade") { if (animation === "fade") {
return { return {
leave: `transition-[transform,opacity] ${duration} ${extraClasses}`, leave: `transition-[transform,opacity] ${duration}`,
leaveFrom: "opacity-100", leaveFrom: "opacity-100",
leaveTo: "opacity-0", leaveTo: "opacity-0",
enter: `transition-[transform,opacity] ${duration} ${extraClasses}`, enter: `transition-[transform,opacity] ${duration}`,
enterFrom: "opacity-0", enterFrom: "opacity-0",
enterTo: "opacity-100", enterTo: "opacity-100",
}; };
@ -57,15 +56,11 @@ function getClasses(
export function Transition(props: Props) { export function Transition(props: Props) {
const duration = props.durationClass ?? "duration-200"; const duration = props.durationClass ?? "duration-200";
const classes = getClasses(props.animation, props.className ?? "", duration); const classes = getClasses(props.animation, duration);
return ( return (
<HeadlessTransition <HeadlessTransition show={props.show} as={Fragment} {...classes}>
show={props.show} <div className={props.className}>{props.children}</div>
{...classes}
entered={props.className}
>
{props.children}
</HeadlessTransition> </HeadlessTransition>
); );
} }