polynux
/
groupomania
mirror of https://github.com/polynux/groupomania-openclassrooms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

really fix scroll bottom with keyframes

This commit is contained in:
Guillaume Dorce 2022-10-28 10:46:50 +02:00
parent 63588e0500
commit 6ac28c7357
2 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/ScrollToBottom.tsx
View File

@ -37,7 +37,7 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
</div> </div>
<button <button
onClick={() => node?.scrollIntoView({ behavior: 'smooth' })} onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -mb-10')} className={'absolute right-3 ' + (show ? 'animate-show bottom-3 block' : 'animate-hide hidden bottom-0 -mb-10')}
> >
<div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all"> <div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
<FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" /> <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />

16
client/tailwind.config.cjs
View File

@ -19,6 +19,22 @@ module.exports = {
padding: { padding: {
'2.5': '0.625rem', '2.5': '0.625rem',
}, },
keyframes: {
'hide': {
'0%': { opacity: 1, display: 'block' },
'99%': { opacity: 0, display: 'block' },
'100%': { opacity: 0, display: 'none' },
},
'show': {
'0%': { opacity: 0, display: 'none' },
'1%': { opacity: 0, display: 'block' },
'100%': { opacity: 1, display: 'block' },
},
},
animation: {
'hide': 'hide 0.2s ease-in-out',
'show': 'show 0.2s ease-in-out',
},
}, },
}, },
plugins: [], plugins: [],