Add animation effect for navigation entries#8685
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8685 +/- ##
==========================================
+ Coverage 53.10% 53.69% +0.58%
==========================================
Files 106 106
Lines 3544 3589 +45
Branches 1023 1033 +10
==========================================
+ Hits 1882 1927 +45
Misses 1406 1406
Partials 256 256 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
|
I do not see anything in the "after" screencast that requires JS changes, that should be possible with pure CSS so no heavy mutation observer is required, no? |
47d32da to
573da00
Compare
Assisted-by: ClaudeCode:claude-opus-4-8 Signed-off-by: Jan C. Borchardt <925062+jancborchardt@users.noreply.github.com>
573da00 to
d9f5550
Compare
|
@susnux adjusted the PR to use minimal needed JS, also rebased and tests fixed. |
|
what is the difference between this JS implementation and a simple CSS on hover animation? |
|
@susnux the CSS :hover fades the bg of each entry in place. The JS moves that single highlight that slides from the old entry to the new one. That travel between separate elements can’t be done by CSS alone cause a transition can only work on the properties of an element itself but not on siblings. |
|
(Maybe it’s not super obvious on the screencast, especially in the top part where there’s an active element. But there is a background highlight which looks like it travels across the different entries.) |
☑️ Resolves
It would be nice to have an animation of the hover feedback highlight of the NcAppNavigation. This makes it feel nicer and smoother, like you are actually interacting with something.
This is a prototype to see how that could look like. Has been tested in the styleguide.
@susnux @ShGKme please check if this would this be good as a base, or should take a different approach.
🖼️ Screenshots
🏚️ Before
Screencast.From.2026-06-27.01-40-20.webm
🏡 After
Screencast.From.2026-06-27.01-34-40.webm
🏁 Checklist
stable8for maintained Vue 2 version or not applicableAssisted-by: ClaudeCode:claude-opus-4-8