I got a WHOLE LOT OF VALUE from this. Animate.css has been around for a long time and I hadn’t found a tutorial that walked me through vue transitions the way yours does. I,’m so using this!!
I have installed animate.css in nuxtjs project, register it in module section in nuxt.config.js, and wrap the element with transition tag, but it is not working. So I include cdn link and add css name in the element (without transition) and it works. How come not working in nuxtjs ???
It depends on how the page is loaded. On the first initial load of a Nuxt app, it is server-side rendered (SSR). All subsequent page loads (unless the browser is refreshed) occur using Vue. I suspect that you're referring to the initial page load?
I know that there is a transition property built into Nuxt for page transitions you can look at here: nuxtjs.org/examples/routes-transitions/. I believe you should be able to use the transitions tag in the template, but I haven't tested that.
@@DiligentDev For showing /hiding a mobile navigation, can you use the same method using transition tag as you used for the button/logo? (Using nuxt too)
I got a WHOLE LOT OF VALUE from this. Animate.css has been around for a long time and I hadn’t found a tutorial that walked me through vue transitions the way yours does. I,’m so using this!!
I like your explanation style. Thank you! It’s a lot helpful for me!
great explanations, keep up the good work
Thank you sir, God bless you
Thank you very much for the tutorial.
Very nice tutorial men! Keep up with good work 😊👍
An amazing work, brother.
Really good and useful!
Thanks
This is awesome, but can we customize animation like setup duration etc ???
Yes, you can and it's just as easy. All you have to do is add a utility class from Animate CSS:
animate.style/#utilities
@@DiligentDev Thank you so much !!!
Amazing tutorial. You're cool!
This is a really helpful video! thank you! New sub :)
I have installed animate.css in nuxtjs project, register it in module section in nuxt.config.js, and wrap the element with transition tag, but it is not working. So I include cdn link and add css name in the element (without transition) and it works. How come not working in nuxtjs ???
It depends on how the page is loaded. On the first initial load of a Nuxt app, it is server-side rendered (SSR). All subsequent page loads (unless the browser is refreshed) occur using Vue. I suspect that you're referring to the initial page load?
thanks bro , i like your video is awesome
really cool
Too good. Thanks
Great one
Does apply in nuxtjs element too ??? or only the page / route transtion available in nuxtjs ???
I know that there is a transition property built into Nuxt for page transitions you can look at here: nuxtjs.org/examples/routes-transitions/.
I believe you should be able to use the transitions tag in the template, but I haven't tested that.
@@DiligentDev For showing /hiding a mobile navigation, can you use the same method using transition tag as you used for the button/logo?
(Using nuxt too)
Did you find this out? Wondering how to animate a mobile navigation. Thanks
@@svnbit8408 I haven't worked with Nuxt in a long time, but this should help you with page transitions: nuxtjs.org/api/pages-transition/
@@DiligentDev Thanks yeah I've been reading that quite a bit, losing hair over it meh
nice
But you did not mention -move in transition-group.
great content