HTMX and the View Transitions API

Рет қаралды 13,443

7 ай бұрын

In this view, we'll look at the new View Transitions Web API - which can be used to smoothly transition between two states in the DOM.
We'll see how this API is easily integrated into HTMX, and how to define custom animations/transitions when going from one state to another.
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugbytes
▶️ Full Playlist:
• Django & HTMX
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/posts/
👾 Github: github.com/bugbytes-io/
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
HTMX Swapping: htmx.org/docs/#swapping
HTMX View Transitions Essay: htmx.org/essays/view-transiti...
#django #htmx

Пікірлер: 56

@AliHassan-wc6nb 7 ай бұрын

I always make sure to like the videos and save them to watch later if I don't watch them right away.

@bugbytes3923 7 ай бұрын

Thanks a lot!

@JT-mr3db 7 ай бұрын

One thing to note is that if you have content you are transitioning that is sandwiched in between other elements, the difference in height between the transitioning elements will snap in to place after the transition. You can see this effect in the htmx transition example docs where the content goes from visible to not visible and there are paragraphs in between. I suspect this is because height animations are cpu bound rather than gpu optimized like the view transitions. For simple transitions this is not going to stop anyone clicking "Purchase". You can always use a framework for any bits of UI that requires a more controlled approach.

@tobidegnon4409 7 ай бұрын

I saw the title and instantly loved it. You keep up to date with trends to bring us great content, thanks so much. I saw the view transition api mention a few weeks ago with the latest release of astro, and was wondering how would that work with htmx and now I have the answer, thanks again.

@bugbytes3923 7 ай бұрын

Thanks a lot Tobi! How is Astro? Never used it yet.

@tobidegnon4409 7 ай бұрын

@@bugbytes3923 I haven't tried it, I've just been keeping an eye on it. For me, the most interesting use case is the creation of mostly static sites.

@user-xu7jz4li7e 7 ай бұрын

Going to save some time this weekend to watch the video. Thanks!

@bugbytes3923 7 ай бұрын

Thank!

@AmoahDevLabs 7 ай бұрын

Great gist as you always do. Keep it up man.

@bugbytes3923 7 ай бұрын

Thanks dude, I appreciate the support!

@sebwylleman 7 ай бұрын

Top content, glad I found your channel, keep them coming!

@bugbytes3923 7 ай бұрын

Thanks a lot!

@seydinaoumarsamabaly1806 7 ай бұрын

Very useful Tutorial ! Thank you mate !

@bugbytes3923 7 ай бұрын

Thanks mate!

@kai.diefenbach 7 ай бұрын

Yet another great video! Thanks!

@bugbytes3923 7 ай бұрын

Thanks a lot!

@Woeden 7 ай бұрын

What an amazing combination. My favorite transition is the 'elastic', i don't know if it is a native thing in plain css, i tried it in Svelte Transitions libary and it was a great result, specifically for the menu drawer after we click the hamburger icon.

@bugbytes3923 7 ай бұрын

Nice! I’ll need to check that one out.

@themarksmith 6 ай бұрын

Excellent video!

@bugbytes3923 6 ай бұрын

Thanks!

@nextnoir 7 ай бұрын

Hi, thank you for the great tutorial! I have a question if you don't mind. How do I realize transitions for several elements on one page? For example a todo list and I want to apply transition effect to each todo (adding, editing, deleting)? If add "sample-transition" to each todo then there is an error "Unexpected duplicate view-transition-name: slide-it"

@iflux8821 7 ай бұрын

Nice one! Thanks! Getting good old railscasts vibes from watching your content! Could you please consider using dark mode or darker default css for the web page so that it’s easier on eyes? Thank you!

@bugbytes3923 7 ай бұрын

Thanks a lot - I'm not familiar with Railscasts, but thanks! And good suggestion - I hadn't considered that.

@oSpam 7 ай бұрын

Great vid, these are all helpful but I forget the day later lol. It’s in my watch later though so as soon as I need it I know where to find it

@bugbytes3923 7 ай бұрын

Yeah, I make the videos to help me learn and remember sometimes 😁 Thanks for watching!

@dentonholmgren4886 4 ай бұрын

Thanks for a great tutorial

@bugbytes3923 4 ай бұрын

Thanks a lot!

@MagnusAnand 7 ай бұрын

Cool video!!

@bugbytes3923 7 ай бұрын

Thanks a lot!

@CristianMolina 7 ай бұрын

Loved it, thx

@bugbytes3923 7 ай бұрын

Awesome, thanks for watching!

@repotranstech9614 7 ай бұрын

thanks for this informative video

@bugbytes3923 7 ай бұрын

Thanks for watching!

@EmptyNonsens 7 ай бұрын

I would love to see it in a full project

@bugbytes3923 7 ай бұрын

True, good point!

@weyrdereveryday3478 4 ай бұрын

Thanx for this intro

@bugbytes3923 4 ай бұрын

Thanks for watching!

@ezraklitsie9253 7 ай бұрын

thank you sir

@bugbytes3923 7 ай бұрын

Thanks for watching!

@frameff9073 7 ай бұрын

good thank

@bugbytes3923 7 ай бұрын

Thanks for the comment!

@ib4112 10 күн бұрын

Does this work on Firefox and Safari?

@ItsMe-vo1du 7 ай бұрын

I have a counter with 2 buttons, one to increase item and one to decrease from the db, each one has a view , how can I press the buttons to update the values, it upadates in db but in the html content does not until I refresh the page

@ItsMe-vo1du 7 ай бұрын

Is there's a tutorial for that ?

@Septumsempra8818 7 ай бұрын

Without code I can't help. What's your network message in your browser dev toolbar? Is it returning html when you click the button? If yes then your HTMX code is buggy. If no, then your view isn't returning a response when given a request.

@ItsMe-vo1du 7 ай бұрын

@@Septumsempra8818 cart app view: def add_item_quantity(request, order_number): cart_item_quantity = Cart.objects.get(order_number=order_number) cart_item_quantity.item_quantity += 1 cart_item_quantity.product_price + cart_item_quantity.product_price cart_item_quantity.save() context = { 'cart_item_quantity': cart_item_quantity, } render(request, 'Components/ProductToBuy.html' ,context) def remove_item_quantity(request, order_number): cart_item_quantity = Cart.objects.get(order_number=order_number) if cart_item_quantity.item_quantity > 1: cart_item_quantity.item_quantity -= 1 cart_item_quantity.product_price - cart_item_quantity.product_price cart_item_quantity.save() context = { 'cart_item_quantity': cart_item_quantity, } return render(request, 'Components/ProductToBuy.html' ,context) cart app : Product/Components/ProductToBuy.html: {% for cart_item in cart_items %} {{ cart_item.size }} {{ cart_item.product_name }} {{ cart_item.product_brand }} $ {{ cart_item.product_price }} {{ cart_item.item_quantity }} {% endfor %} cart app model: class Cart(models.Model): # user = models.ForeignKey(User, on_delete=models.CASCADE) product_name = models.CharField(max_length=255) product_brand = models.CharField(max_length=100) image_field = models.ImageField(upload_to='cart_images/') size = models.CharField(max_length=10) color = models.CharField(max_length=10) product_price = models.DecimalField(max_digits=10, decimal_places=2) item_quantity = models.PositiveIntegerField(default=1) order_number = models.IntegerField(unique=True) # No default random number here def __str__(self): return self.product_name

@ItsMe-vo1du 7 ай бұрын

it update in db , but the content in the templates does not

@oSpam 7 ай бұрын

@@ItsMe-vo1duyou’ll need a swap out of bands div that replaces the counter. Do you have discord or any other form or contact? I’m free to help if you’d like

@Septumsempra8818 7 ай бұрын

Does this work on scroll? When I'm scrolled down the page, i get both the scroll and the transition. Feels disorienting.

@bugbytes3923 7 ай бұрын

I don't think this works on scroll, no. Not tested that though!

@Septumsempra8818 7 ай бұрын

@bugbytes3923 HTMX has a problem once pages need scroll. I've sorta fixed it with 'htmx.config.scrollBehaviour = "instant"' in a script tag in base.html this prevents the page from scrolling up to top of new page after settling the request, but doesn't allow a smooth view transition. "hx-swap show:windop:top" is supposed to prevent all thins from happening but it still scrolls. I don't know if it's a me-bug or an htmx problem.

@Septumsempra8818 7 ай бұрын

🇿🇦🇿🇦🇿🇦🇿🇦