fix: transition animation (#2974)

switched to using headlessui transition instead of react-css-transition due to new version breaking the
animation
This commit is contained in:
Brandon Cohen
2022-08-24 13:18:09 -04:00
committed by GitHub
parent baf1ea95a3
commit 98028bf2f4
22 changed files with 66 additions and 174 deletions

View File

@@ -1,15 +1,14 @@
import Button from '@app/components/Common/Button';
import Modal from '@app/components/Common/Modal';
import Transition from '@app/components/Transition';
import { Permission, useUser } from '@app/hooks/useUser';
import { Menu } from '@headlessui/react';
import { Menu, Transition } from '@headlessui/react';
import { ExclamationIcon } from '@heroicons/react/outline';
import { DotsVerticalIcon } from '@heroicons/react/solid';
import type { default as IssueCommentType } from '@server/entity/IssueComment';
import axios from 'axios';
import { Field, Form, Formik } from 'formik';
import Link from 'next/link';
import { useState } from 'react';
import { Fragment, useState } from 'react';
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
import ReactMarkdown from 'react-markdown';
import * as Yup from 'yup';
@@ -66,6 +65,7 @@ const IssueComment = ({
} mt-4 space-x-4`}
>
<Transition
as={Fragment}
enter="transition opacity-0 duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
@@ -114,6 +114,7 @@ const IssueComment = ({
</div>
<Transition
as={Fragment}
show={open}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"

View File

@@ -7,10 +7,10 @@ import PageTitle from '@app/components/Common/PageTitle';
import IssueComment from '@app/components/IssueDetails/IssueComment';
import IssueDescription from '@app/components/IssueDetails/IssueDescription';
import { issueOptions } from '@app/components/IssueModal/constants';
import Transition from '@app/components/Transition';
import { Permission, useUser } from '@app/hooks/useUser';
import globalMessages from '@app/i18n/globalMessages';
import Error from '@app/pages/_error';
import { Transition } from '@headlessui/react';
import {
ChatIcon,
CheckCircleIcon,
@@ -28,7 +28,7 @@ import axios from 'axios';
import { Field, Form, Formik } from 'formik';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { Fragment, useState } from 'react';
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
import { useToasts } from 'react-toast-notifications';
import useSWR from 'swr';
@@ -174,6 +174,7 @@ const IssueDetails = () => {
>
<PageTitle title={[intl.formatMessage(messages.issuepagetitle), title]} />
<Transition
as={Fragment}
enter="transition opacity-0 duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"