adding transition effect for the ideas hover

anish1617 · May 6, 2022 · 6417551 · 6417551
1 parent 41fc7c9
commit 6417551
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/src/common/playideas/PlayIdeas.jsx b/src/common/playideas/PlayIdeas.jsx
@@ -103,7 +103,7 @@ const PlayIdeas = () => {
  href="https://github.com/atapas/react-play/blob/main/CREATE-PLAY.md"
  target="_blank"
  rel="noopener noreferrer"
- className="btn-primary"
+ className="btn-primary action-btn"
  >
  <IoAddSharp className="icon" />
  <span className="btn-label">Create Play</span>
@@ -112,7 +112,7 @@ const PlayIdeas = () => {
  href={`https://github.com/atapas/react-play/discussions/new?category=ideas&title=${idea.title}`}
  target="_blank"
  rel="noopener noreferrer"
- className="btn-default"
+ className="btn-default action-btn"
  >
  <RiChatNewLine className="icon" />
  <span className="btn-label">Start discussion</span>

diff --git a/src/common/playideas/playIdeas.css b/src/common/playideas/playIdeas.css
@@ -164,7 +164,8 @@
 
 .list-playideas .list-playideas-item:hover .idea-actions,
 .list-playideas .list-playideas-item:focus .idea-actions {
- display: flex;
+ opacity: 1;
+ align-items: center;
 }
 
 .list-playideas .list-playideas-item .idea-actions {
@@ -173,14 +174,38 @@
  right: 0;
  bottom: 0;
  left: 0;
- display: none;
+ opacity: 0;
+ display: flex;
  flex-direction: column;
  justify-content: center;
- align-items: center;
+ align-items: flex-start;
  padding: 0 4rem;
  grid-gap: 0.4rem;
  background-color: rgba(var(--color-neutral-90-rgb),0.8);
  z-index: 1;
+ transition: all 0.14s ease-in-out;
+}
+
+.list-playideas .list-playideas-item .idea-actions .action-btn {
+ position: relative;
+ transform: translateX(-100%);
+ transition: all 0.1s ease-in-out;
+}
+
+.list-playideas .list-playideas-item .idea-actions .action-btn:nth-child(2) {
+ position: relative;
+ transform: translateX(100%);
+ transition: all 0.12s ease-in-out;
+}
+
+.list-playideas .list-playideas-item:hover .idea-actions .action-btn:nth-child(2),
+.list-playideas .list-playideas-item:focus .idea-actions .action-btn:nth-child(2) {
+ transform: translateX(0);
+}
+
+.list-playideas .list-playideas-item:hover .idea-actions .action-btn,
+.list-playideas .list-playideas-item:focus .idea-actions .action-btn {
+ transform: translateX(0);
 }
 
 @media screen and (max-width:1200px) {