Modal animation and conditional rendering best practice

Ask us anything
1

As stated in the documentation, to hide and display a modal, it’s better to use conditional rendering so that it’s completely removed from the DOM. However, this approach breaks animations like fade-in, etc. How can I use animations with conditional rendering?

2

You can still use standard css animations and they will work with conditional rendering!

image
image1429×1346 97.6 KB

You just won’t get an animation on fade out.

You can take a look here, these modals use conditional rendering and but animate in. StackPack | Premium WeWeb Components

1 Like
3

in the WeWeb modal there is no that part, did you create a custom modal with a div?

image
image2208×2828 267 KB

4

Yes, it’s a custom build, not WeWeb’s modal. :smile:

1 Like
5

thanks! another question :grin:, in this video how did you know about the contex? is there any documentation about the javascript api on the web elements?

6

Honestly I found it a while ago somewhere on the forum. :smile:

1 Like
7

@Joyce do you know if there is? because I found the dev documentation but it is more specific on how to create weweb component in vue, I wanted to understand which js objects we can use inside the editor like the context and what they are for, thanks