tqt/Ghost
2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00
Code Issues 1 Releases Wiki Activity

Subtle fade in for comments on render and pagination

Browse source 
refs https://github.com/TryGhost/Team/issues/1703
This commit is contained in:
James Morris 2022-07-27 11:49:17 +01:00
parent 9bd258b461
commit 1ff7b15a50
1 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
apps/comments-ui/src/components/Comment.js
View file

@ -69,7 +69,16 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
); );
} else { } else {
return ( return (
<> <Transition
appear
show={true}
enter="transition-opacity duration-300 ease-out"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className={`flex flex-row ${hasReplies ? 'mb-2 sm:mb-4' : 'mb-6 sm:mb-10'}`}> <div className={`flex flex-row ${hasReplies ? 'mb-2 sm:mb-4' : 'mb-6 sm:mb-10'}`}>
<div> <div>
<div className="flex items-center mb-2 h-12"> <div className="flex items-center mb-2 h-12">
@ -120,7 +129,7 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
<Form parent={comment} close={closeReplyMode} isReply={true} /> <Form parent={comment} close={closeReplyMode} isReply={true} />
</div> </div>
</Transition> </Transition>
</> </Transition>
); );
} }
}; };