I'm starting to learn a few basics with nuxt & vue. I'm basically building a little list of elements that you can click and will expand with an image or some other content.
What I made so far
is an homepage with the list (like the first image) and 3 other pages : /about, /projects, /contact
Here is the demo with images :
As soon as I click the first link, an image appears, and everything is moved down to the bottom. The URL is updated with the corresponding url (here, /about)
What I would like to achieve:
So far it's working fine and I can naviguate on my website. But as the images suggests, I would like the differents elements of the menu to move with an animation to the bottom on the page transition to the different pages, it would take them (let's say) 2 seconds to go their next position in the next page.
It would look something like that : https://codepen.io/pbouigue/pen/KKVxbYa
when you click a dropdown menu like first videothe menu expends and everything is moved down.
The issue with that is that the url is not updated and considered to move to another page (in the case it should be exemple.com/first-video
<template>
<div class="container">
<transition-group name="list">
<nuxt-link to="about" key="about">First item - about</nuxt-link>
<img src="../assets/ours.png" alt="">
//these two remaining items should have an animation when they move to the bottom of the image
<nuxt-link to="projects" key="projects">Second item - projects</nuxt-link>
<nuxt-link to="contact" key="contact">Last item - contact</nuxt-link>
<transition-group>
</div>
</template>
<style >
img{
display: block;
width: 40%;
}
a{
display: block;
color: orangered;
font-family: 'Courier New', Courier, monospace;
}
</style>
and my /about :
<template>
<div class="container">
<transition-group name="list">
<nuxt-link to="about" key="about">First item - about</nuxt-link>
<nuxt-link to="projects" key="projects">Second item - projects</nuxt-link>
<nuxt-link to="contact" key="contact">Last item - contact</nuxt-link>
<transition-group>
</div>
</template>
<style >
img{
display: block;
width: 40%;
}
a{
display: block;
color: orangered;
font-family: 'Courier New', Courier, monospace;
}
</style>
Do you have any help on how to achieve that? Maybe there is an easier way to do it, but since I'm all new and learning by myself, I would have loved some clues or a little help.
I read about transition-group and this css, but somehow, I can't manage to make it work...
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
because actually this :https://vuejs.org/guide/built-ins/transition-group.html#move-transitions does exactly what i would like to do : move elements down in an animation, but I would like this to happen on a page transition in order to have to url updated.
Maybe I should look for https://router.vuejs.org/guide/essentials/nested-routes.html ?
