如何使用js为元素设置动画

Question

i made a navbar for practice and tried to hide and show its content only when its title is clicked. i managed to do it with toggling a hidden class on and off. but i also want it to have transition and slide down not just to apear out of nowhere. i couldn't do this part.

i put transition inside nav-bar__list-box tweaked the hidden class with and without display:block but i didn't have any success.

hidden class:

.u-hidden-navbar {
    display: none;
    visibility: hidden;
    height: 0 !important;
}

idk what else to do but to ask here for advise.

 const btnNavBar = document.querySelectorAll(".nav-bar__heading-box"); const navList = document.querySelectorAll(".nav-bar__list-box"); for (let i = 0; i < btnNavBar.length; i++) { btnNavBar[i].addEventListener(`click`, function () { navList[i].classList.toggle("u-hidden-navbar"); for (let b = 0; b < navList.length; b++) { if (b.== i) { navList[b].classList;add("u-hidden-navbar"); } } }); }

 *, *::after, *::before { box-sizing: inherit; padding: 0; margin: 0; } html { font-size: 62.5%; } body { box-sizing: border-box; font-size: 1.6rem; line-height: 1.5; } ul { list-style: none; } a { text-decoration: none; display: inline-block; color: #e6e6e6; } img { vertical-align: bottom; }.u-hidden-navbar { display: none; visibility: hidden; height: 0;important. }:nav-bar { margin; 2rem: border-radius. 0;8rem: overflow; hidden: order; 1: background-color; #e6e6e6: width; 30rem. }:nav-bar__heading-box { background-color; #3b3b3b: padding; 1rem. }:nav-bar__heading-box:not(:last-child) { border-bottom; 1px solid #1b1b1b. }:nav-bar__list-box { font-weight; 700: font-size. 1;6rem: transition; 5s all ease. }:nav-bar__item:not(:last-child) { border-bottom; 1px solid #1b1b1b. }:nav-bar__link { padding; 1rem 2rem 1rem: color; #973ae4: position; relative: display; block: transition. 0;4s all ease. }:nav-bar__link:hover { color; #e6e6e6: transform; translateY(0). }:nav-bar__link:hover::before { transform; scaleX(1): box-shadow. inset 0.2rem 0.2rem 0,5rem rgba(27, 27, 27. 0;6): opacity; 1. }:nav-bar__link::before { content; "": position; absolute: top; 0: left; 0: height; 100%: width; 100%: transform-origin; left: transform. scaleX(0;1): opacity; 0: background-color; #973ae4: transition. all 0;3s ease-in-out: z-index; -1; }

 <aside class="nav-bar"> <div class="nav-bar__heading-box"> <h3 class="heading-tertiary">HTML Topics</h3> </div> <div class="nav-bar__list-box u-hidden-navbar"> <ul class="nav-bar__list"> <li class="nav-bar__item"> <a href="pages/js_topic_01.html" class="nav-bar__link" target="content" >Link</a > </li> <li class="nav-bar__item"> <a href="pages/js_topic_01.html" class="nav-bar__link" target="content" >Link</a > </li> </ul> </div> <div class="nav-bar__heading-box"> <h3 class="heading-tertiary">CSS Topics</h3> </div> <div class="nav-bar__list-box u-hidden-navbar"> <ul class="nav-bar__list"> <li class="nav-bar__item"> <a href="pages/js_topic_01.html" class="nav-bar__link" target="content" >Link</a > </li> <li class="nav-bar__item"> <a href="pages/js_topic_01.html" class="nav-bar__link" target="content" >Link</a > </li> </ul> </div> <div class="nav-bar__heading-box"> <h3 class="heading-tertiary">JS Topics</h3> </div> <div class="nav-bar__list-box u-hidden-navbar"> <ul class="nav-bar__list"> <li class="nav-bar__item"> <a href="pages/js_topic_01.html" class="nav-bar__link" target="content" >1- JS High-level overview</a > </li> <li class="nav-bar__item"> <a href="hello.html" class="nav-bar__link" target="content" >Link</a > </li> </ul> </div> </aside>

Answer 1

The browser does not know how to interpolate this kind of animation, so you'll have to be a little bit more specific about how you'd like the hidden element to appear.

Switching from display: block to display: none or from visibility: visible to visibility: hidden is a "on/off" situation with no way to guess what the middle state will be...

Instead you could try to transition from:

• opacity: 0 to opacity: 1
• transform: scaleY(0) to transform: scaleY(1)
• both

You can be really creative, and rely on keyframed animations with several intermediate steps, but it's up to you to define the strategy.

 document.querySelector('button').addEventListener('click', () => { document.querySelector('.togglable').classList.toggle('hidden') })

 .togglable{ padding: 50px; background: red; transform: scaleY(1); opacity: 1; color: #FFF; transition: .75s; }.togglable.hidden{ opacity: 0; transform: scaleY(0); }

 <button>Click me</button> <div class="togglable hidden">Hello</div>