Browse Source

chore(blog): specific transitions to improve perf

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
pull/1/head
Muthu Kumar 2 years ago
parent
commit
d1d76a48c5
Signed by: mkrhere GPG Key ID: 3FD688398897097E
  1. 6
      src/pages/blog/Home.tsx

6
src/pages/blog/Home.tsx

@ -102,7 +102,7 @@ const BlogHome: React.FC = () => {
& > aside, & > aside,
& > aside .blog-list { & > aside .blog-list {
transition: all 300ms; transition: transform 300ms, min-width 300ms, max-width 300ms;
} }
&:is(.aside-closed) { &:is(.aside-closed) {
@ -202,7 +202,7 @@ const BlogHome: React.FC = () => {
gap: 0.25rem; gap: 0.25rem;
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: all 300ms; transition: background 300ms;
&:hover { &:hover {
background: #111111; background: #111111;
@ -250,7 +250,7 @@ const BlogHome: React.FC = () => {
css` css`
background: #111111; background: #111111;
position: absolute; position: absolute;
transition: all 300ms; transition: transform 300ms;
transform: translateX(100%); transform: translateX(100%);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;

Loading…
Cancel
Save