From the course: HTMX Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Solution: Handling transitions

Solution: Handling transitions - HTMX Tutorial

From the course: HTMX Essential Training

Start my 1-month free trial Buy for my team

Solution: Handling transitions

“

(upbeat music) - [Instructor] All right, let's take a look at our solution. So if we have a route called magic that returns some data when our response ends, we need to make this swap happen over here in our index.html. So we're going to add a few attributes here to our div, specifically hx-get. So we need to say anytime we visit that /magic route, we want to trigger the mouseenter event once and then we'll say hx-swap=outerHTML and we'll also add the transition true attribute here. So now if I make sure that I'm in the right directory and I run node server, we should be able to head over to Localhost:3000, and then as soon as I hover, that magic will happen. So we get a little bit of this magic simply by hovering because we're adding that trigger event for mouse entering and then we're going to swap in that HTML that we find over at the hx-get magic route. Nice. Excellent work, everyone. You did well. We have been able to incorporate our server with our front end code without having…

Contents