Chall using Flex, Grid, Javascript and Responsive

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Zoulander 👋

  I think it's easier to put transition to your <ul> using jQuery. There are quite enough built-in show/hide animation in jQuery. But if you want to use vanilla JavaScript, I believe there are some methods available (combined with CSS). Here's one example of how to do that.

  display property is not animatable. We could use transform instead. In .container .baseline .share ul, replace display: none; with this code below:

  display: flex;
  transform: scale(0);
  transition: transform 0.3s;
  

  We give it scale(0) to hide it initially, before someone click the share button. When the button is clicked, it changes to scale(1) and vice versa. So the JavaScript code would be like this:

  let share = document.getElementById("arrow");
  let bubble = document.getElementById("bubble");
  
  share.addEventListener("click", () => {
    if (bubble.style.transform == 'scale(1)') {
      bubble.style.transform = 'scale(0)';
    } else {
      bubble.style.transform = 'scale(1)';
    }
  });
  

  If you want to make different animations on mobile screen, you could change the type of transform property.

  Hope this helps. Happy coding!

  Marked as helpful

  0

  ---

  

  Zoulanders•380

  @AlexDDevvPosted almost 2 years ago

  Hello dude, thanks for your comment, it was very helpful ! It's better with this code ! Have a good day

  0