Article Preview Component

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Roy. To make transition between show/hide the .share-components, we can't use display: none; and display: flex, because display property is not animatable. Change .hidden style from display: none; to this:

  .container .card .article-description .profile .hidden {
      scale: 0;
  }
  

  Then add this two declarations:

  .container .card .article-description .profile .share-components {
      ....
      scale: 1;
      transition: scale 0.3s;
  }
  

  You can use other methods to show/hide, like using position (especially in mobile view) to make slide up/slide down effect.

  Hope this helps. Happy coding!

  Marked as helpful

  1
• 

  Roy•600

  @arkaroy135Posted almost 2 years ago

  Thank you for the suggestions. I added the animation effects according to your suggestions. Kindly check it once. And I still need to fix the button's background and the SVG's color when clicked. Can you please help me with that too ?

  0