Animating Vue Router Transitions in Vue 3
HTML-код
- Опубликовано: 24 янв 2021
- Vue Router transitions are a quick and easy way to add some flair to Vue app. They allow you to add smooth animations/transitions between different pages of your app. In this video, learn how to set up Vue Router in Vue 3 and add transitions using both custom classes and the Animate.css library.
LINKS
Companion Article w/ Code - learnvue.co/2021/01/4-awesome...
Vite Tutorial - • Creating Your First Vu...
Animate.css - animate.style/
FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vue-3-essentials-...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co/vueschool 
Хобби
Best tutorial for Vue 3 transitition I have watched so far. Thanks
Wow. The only tutorial that worked flawlessly and was clearly understandable. Thanks.
Seriously this is by far the most well articulated set of videos for vue
thank you so much! more content to come!
Wow. What a cool video, and a great teacher. The concepts were built upon each other, done in real time, and at a smooth pace. A++++!
Detailed and clean explanation ❤️
Wow! I know Vue and Vue-Router and have use all those concepts that the video explains. But I have NEVER EVER seen or read a better and more concise overview on this topic! Absolutely excellent! Thank you very much!
appreciate it tons!
You are the best. Not only the latest version but also very good explanation and content!
The way you deliver information is like a professional, very easy to understand for beginners like me, you deserve more subscribers.
thanks for watching! i'd love to know what you'd want to see next!
Thank you! This is exactly what I’m looking for right now!
I thought I had everything when I saw the newer transitions video but no he top's it off with the EXACT use case I had in mind! Haha this is great!
The pacing and content are both excellent. I'm new to Vue and couldn't find a basic example of installing/setting up vue-router with Vite. Thank you!
Thanks so much! Glad you enjoy it. What other topics are you interested in as someone new to Vue?
@@LearnVue Building a really solid best-practices form. Input-level and form-level validation messages and styling. Disabled inputs & buttons while submitting. Define reusable components so you don't need to duplicate this for every form.
Pro trick: watch movies at flixzone. Me and my gf have been using it for watching a lot of movies recently.
@Deangelo Levi Definitely, have been watching on flixzone for months myself :D
Thank you. This video of yours helped a lot, really.
I have learnt more in this simple tutorial that I ever thought I would when I clicked on the video. Thanks mahn
That's always my goal :)
hoi! nice tutorial on vue router transitions! thanks for bringing high-quality vue tutorials both for vue2 and vue3! i actually have a suggestion.. since you're making a lot of vite + vue 3 content recently, can you make a video about vite-plugin-pages? it seems noteworthy because it feels more like nuxtjs when you have that setup on your vite project, worth a topic of your time. other than that, really awesome content! keep it up!
Your channel is amazing. Keep it up!!
I'm new to vue(2days in) , thank for this
thanks, this is so easy to understand!
It was great! please make more advanced courses for vue and nuxt❤
What just I need. Need more of this
glad to hear! thanks!
amazing video by the way
Super awesome, thank you very much!
You're very welcome!
Bro, thank's for this besting content!
Thank you 💙
Thanks for the great content. 🎈
Great tutorial, thanks 🙏
you’re welcome
Thank you Sir. Please keep going
Thank you for the encouragment - I plan on making tons of video in the next few months so be ready!
Awesome!
nice tutorial！
Very helpful, thanks.
aye! glad it helped 💚
Very good explanation! I have a question that someone here is able to help me with. I have a menu with home in the middle, on the left agenda and on the right contact. When i'm on home and I click on agenda. Home slides to the right and agenda slides in from the left. But when I click on contact home slides right and contact comes in from the right. Is it possible to detect on which item you click and use a different transitions based on that choice. Thanks in advance!
upon searching for diamonds. i found diamonds. ty for this.
well said my friend, very poetic and accurate
Do you have a video to do the same effect using Nuxt 3?
Thank you sir ..
great voice! greate content! ..wow. Beautiful.
Thanks for watching!
Yet another amazing video. Also, sidenote... Is it possible to setup a discord server where we could give our suggestions for possible videos?
Thanks again! Right now, I think the best way to give suggestions is to email me over at matt@learnvue.co - hope to hear from you!
it's veryy gooood
Wow!
wow no i have router transition, thank brother!
What is the name of the Font used in the thumbnail
Can someone explain me why i should use this technic instead of using /pages/ ???
Hi ! Can I ask why this does not work anymore? everytime i type in mode="outIn" , my page just goes blank
Boooooooom! 💥
5:28 the part about transitions starts here
i cant find the github of this class
I am from Ukraine and I seen that you the best in the world!
♥️♥️♥️♥️♥️
Strangly my transition only works "sometimes" alot of times my View just does not show up.... any idea why?
```
Home |
Login |
Register |
Events
```
This is my router:
```
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/login",
name: "login",
component: () => import("@/views/LoginView.vue"),
meta: {
enterClass: 'animate__animated animate__fadeInLeft',
leaveClass: 'animate__animated animate__fadeOutRight',
}
},
{
path: "/events",
name: "events",
component: () => import("@/views/EventsView.vue"),
},
{
// the 404 route, when none of the above matches
path: "/404",
name: "error-404",
component: () => import("@/views/error/ErrorPage404.vue"),
},
{
path: "/:pathMatch(.*)*",
redirect: "/404",
},
],
});
```
😲
it doesn't work for me
thank you open the CC subtitle for the poor English people with poor ear
I would recommend to drop the first half showing what router is and focusing on the the subject of the video title.
I disagree, there are too many half baked tutorials out there.. a good tutorial is complete imo.. and this is perfect. If you don't need the first bit skip over it.
With 3 routes adding a name of the class to meta wouldn't work.
Take a look a the article linked in the description under the section, "Dynamic Transitions Using v-bind"
What I should to do to remove # from url? CreateWebHashHistory doesn’t work