Article preview component with plain JS

Community feedback

• 

  Opeoluwa•330

  @Opeoluwa-OgunlajaPosted over 2 years ago

  Hey Ania,

  • When you set display: none; to an element, it removes it from view immediately so it doesn't wait for any transitions or animations.
  • You can maybe use JavaScript to change a certain class; For example, if you want to hide an element as in your case, instead of having two class states, ['show', 'hide'], you can have intermediaries like ['hiding'] when you want to hide or ['showing'] when you want to show.
  • You can add the animations to those intermediaries then add the display property on the final states 😁😁
  • So, you'll just rotate the class names. E.g; (Stuff is the general classname)
  • Hidden: `<elem class="stuff hidden">
  • Showing: <elem class="stuff show opening"/>
  • Already on the screen: <elem class="stuff show opened"/>
  • Hiding: <elem class="stuff show hiding"/>
  • Hidden: <elem class="stuff hidden"/>
  • Then add css stuff like;

  .stuff{
  transition: opacity 1s ....;
  }
  
  .show{
  display: ........;
  }
  
  .hidden{
  display: none;
  }
  
  .opening{
  opacity: 0.2;
  }
  
  .opened{
  opacity: 1;
  }
  
  .hiding{
   opacity: 0;
  }
  

  Marked as helpful

  1

  ---

  

  P

  ania•330

  @ania221BPosted over 2 years ago

  @Opeoluwa-Ogunlaja

  Hello Opeoluwa,

  Thank you very much for having a look at my solution, I appreciate!

  In the final version I don't use display: none;. I changed the opacity and z-index. The opacity is transitioned, z-index isn't. Yet the problem persists.

  Thank you for the tip about intermediaries! I will try to look into it.

  Thank you once again and have a great day!

  0

  

  Opeoluwa•330

  @Opeoluwa-OgunlajaPosted over 2 years ago

  @ania221B Sure! 😁

  1