Animated Active Menu Highlights in VueJS – Daily Vue Tips # 1

Onlangs werkte ik aan een navigatiemenu, toen ik me realiseerde dat ik een schone manier wilde om de huidige pagina te markeren.

Meestal zou ik een element gewoon een andere kleur geven en het een dag noemen, maar deze keer wilde ik met iets animaties werken.

Uiteindelijk heb ik een aantal handige logica voor actieve menu-accentuering gemaakt met behulp van de Composition API en CSS-stijlen.

Ik dacht dat ik mijn oplossing zou delen – dit is wat ik uiteindelijk heb gebouwd.

Oké, laten we beginnen met coderen.

Ons menu maken

Dus het eerste dat wil doen, is ons menu samenstellen. We gebruiken een & lt; ul & gt; -element met daarin vier & lt; li & gt; -elementen. We zullen er ook een paar leuke stijlen aan geven. In dit voorbeeld wordt FontAwesome ook gebruikt voor enkele leuke pictogrammen.

Vervolgens willen we een reactieve gegevenseigenschap instellen die de huidige pagina vertegenwoordigt. Dus met behulp van de Composition API willen we dat aangeven in onze installatiemethode.

Vervolgens willen we een methode maken die onze variabele currentPage kan wijzigen.

Terug in onze sjabloon willen we twee dingen toevoegen.

Laten we nu eens kijken wat we hebben.

Veel beter, laten we nu ons actieve menu markeren.

Onze actieve menu-highlight maken

Het eerste dat we willen doen, is onze div met highlight bouwen en deze positioneren.

In ons sjabloon willen we het in onze navigatie invoegen na alle & lt; li & gt; elementen.

Vervolgens willen we binnen onze stijl een positie: absoluut geven en deze aan de rechterkant uitlijnen. We willen ook de grootte en kleur instellen en vooral een overgang voor de bovenste eigenschap

geven

Dit zorgt voor de soepele dia-animatie die we zoeken.

Zo zou het eruit moeten zien.

Animatie van onze actieve menu-highlight

Om onze highlight daadwerkelijk te laten bewegen , afhankelijk van het geselecteerde element, willen we teruggaan naar onze changePage -methode en de volgende code toevoegen die toegang heeft tot onze highlight en zijn toppositie.

In ons voorbeeld is elk element 50 pixels hoog, dus daarom gebruiken we dat ook, maar het kan in uw projecten anders zijn.

Dankzij de overgang die we ons hoogtepunt gaven, zal het element soepel bewegen tussen de oude en nieuwe topposities.

Helemaal klaar!

En we zijn allemaal klaar. Er zijn tal van use-cases voor een leuke kleine gebruikersinterface. Het kan bijvoorbeeld handig zijn voor paginering, navigatiemenu’s, hover-effecten en nog veel meer.

U kunt de animatie ook implementeren met CSS-keyframes en animatie-eigenschappen en eenvoudig waarden wijzigen en de animatie activeren wanneer ons geselecteerde element verandert.

Laat me de coole manieren weten waarop je het in je Vue-projecten kunt implementeren!

Ik hoop dat je deze snelle Daily Vue-tip nuttig vond en manieren kunt bedenken om deze techniek in je code te gebruiken.

Veel plezier met coderen!

Dit is het eerste bericht in onze serie Daily Vue Tips, waarin je korte tutorials over Vue-code vindt. Het doel van deze serie is om op een korte en verteerbare manier nuttige fragmenten en Vue-tips te geven. Ik hoop dat je ervan geniet!

Als je meer wilt weten over Vue 3, download dan mijn gratis Vue 3-cheatsheet met essentiële kennis, zoals de Composition API, de syntaxis van Vue 3-sjablonen en het afhandelen van gebeurtenissen.