Chall using Flex, Grid, Javascript and Responsive

Solution retrospective
Hello ! There is my third challenge to learn Javascript, I just have one question. How to put a transition on my <ul> with Javascript? Have a good day !
Please log in to post a comment
Log in with GitHubCommunity feedback
- @amalkarim
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 usetransform
instead. In.container .baseline .share ul
, replacedisplay: 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 toscale(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
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord