For the css, do not do "transition: all 0.3s...", transition only the transform (transition: transform 0.3s, ...) . Otherwise it will also transition the box-shadow which will degrade performance and make it laggy.
This is cool, thanks for showing. Few enhancements come to mind: - Use visibility: hidden and pointer-events: none instead of display: none. This means you don't need the -active class as these properties are toggles, with the opacity taking care of the transition effect.. Also means, you can pre-cache the getBoundingClientRect() coords. - Transform the dropDown Background X and Y instead of changing width/height (saves on layout calcs). Would require calculating but can also be pre-cached. As the dropdown is it's own node, it won't impact the content but it will require decoupling or inverse transforms on the span arrow. - Have a wrapper/container element as a direct child to Nav and parent to the other elements within. This can be position relative, allowing the dropDown background to be positioned absolutely against it. Then, you can translateX based on coords from the relevant 's. This means position of the NAV doesn't impact. There's an assumption that the NAV is full width, if not then you still need the getBoundingClientRect(). * A wrapper element may impact semantics this is simply an alternate option.
Been working on it, still got a day or so to go -> Will post the repo when done. I'm using ES6 classes and request animation frame instead of CSS transition. When I create instances of the dropdown menus, I measure the getBoundingClientRect to find the max dropdown area. I then use the width and height of this to assign as width and height to the dropdown background. This way, when you scale up and down it doesn't distort the appearance of the background too much. I'm using aria-expanded attribute instead of classes to manage state. I'm also using a game timer (check out Meth Meth Methods channel) to calculate the transforms and opacity changes (using an easing function) at 120FPS. Then request animation frame kicks in to paint when it can, hopefully this means smoother animation (I guess we'll see). I also detect when you mouse enter/leave the nav bar to kick off/cancel the animation frame as well as add/remove event listeners on the individual triggers. Also, trying to manager layer promotion dynamically with will-change (See Swipeable Cards vid from Google Devs). The stripe site also applies a cool 3D transform when you first hover a trigger so may look to implement that as well. Like any Javascript UI, it snowballs real quick haha!!
I still have quite a bit to go, sorry have been busy with work and this has sort of snowballed. Here's the repo in it's current state, just 'npm install' then 'npm run dev' to compile via webpack and host on webpack-dev-server: github.com/DannyLingard/nav-follow. Check back regularly for updates, will update the readme as well. There's a lot of spaghetti, debugging and testing code still in there as was having trouble killing the animation frame and removing event listeners from the triggers. I was also having issues managing 'this' as things weren't originally behaving as expected. You'll see I .bind(this) instead of using arrow functions in some places, this is because to removeEventListeners(), you need to provide the exact function signature that you pass to the callback of addEventListener(). Turns out, you can't use anonymous functions in the callback (maybe you can with advanced trickery but even MDN docs were light on examples/guidance). Like any Javascript UI work, there's always a lot of bases to cover if you want it to be robust in production. Although this won't have be completely production ready, I'm hoping to incorporate some aspects like managing requestAnimationFrame useage, layer promotion, as well as adding/removing event listeners when possible. Although this increases complexity, the end result is a component that only uses transforms and opacity changes for movement and is a lot more perform ant. Flip side, it takes x amount of time longer to build so all depends on priorities. Currently, both the translate and scale transforms are wired up for the dropdown background but opacity is still operating via CSS. The triangle at the top of the Dropdown background is currently always visible. I have a ton of refactoring to do as well as some functional programming techniques I want to test out so the code may be changing a lot. In terms of the cache values, these will need to be updated whenever the viewport changes, either via resize or orientation change. This will require additional event listeners which are usually done at app level. I'll see if I can include method hooks to handle dynamic recalc etc. I don't know whether I'll have the time to invest in that but we'll see how it goes.
Holy shit! I was watching this in my bed to confuse my mind and sleep because there’s nothing better than watching someone talks and codes to distract your brain then sleep but this 20 mins of video is going to change a looooot of things in my life first of all why the hell didn’t I found this display thing before! If I know this before I can do a lot of great stuff I know at least 20 animations I couldn’t make it responsive to width and height change because of this, shit man this saved my life! and the second thing is how crazy is that coordinate API this is just fucking perfect, I can do unlimited things with just this two little things, Wes you are the best teacher I have ever had, I want to thank you so much, this 20 mins of video sadly wake me up yet it’s very very valuable to me, I’m super relieved right now thank you ❤️
One more idea / comment / question. To prevent multiple li's having the active class, couldnt you just set the setTimeout in handleEnter to 1ms? I find that it works, is there any scenarios that I may not be thinking of where it wouldnt?
The first time you hove over an item with dropdown, you see the box coming from the top-left side to the correct coordinates. Is there a way to prevent this from happening?
Hey, great video! im having this issue where if i try to hover over child elements of the li, it kinda triggers the mouseleave event, can you give me a solution for it? Thanks!
