I have a button, when clicked changes a variable which makes a section visible. The section display (conditional display) is binded to that variable.
I want to make that section ease into display when it becomes visible.
I’m having trouble figuring out when this transition feature applies and how to apply it to a specific state change. The delay feature works when I use it, but not the ease.
Hey @RCS! So you’d like to animate the display property ah? You found a very rare “bug” that is actually a very rare feature / exception of the web, so consider yourself lucky haha! In some cases, such as this, the transition does not work. You can not transition in display, and also from something like 100px to auto.
Oh no way the delay function on display is a bug?
Opacity is a good way around it. Thanks for showing.
I also learned that ease doesn’t work when you use vh to auto. You need exact px numbers.
Hi Broberto,
Is this something related to all web dev or is it a specific weweb “bug” and there could be a fix later on? (I’m talking about moving from display: none to flex) . Do you have more literature about it maybe?
Thanks for the workaround.
Hey Jean, it’s actually a “feature” of the web itself, you can’t apply transition in certain cases.
Hey Brobeto,
Thanks a lot for the link, that was a great read and to the point.
Hey Broberto, is there another way to use on WeWeb to delay display of sections/objects. Display property is not the only way to do this in HTML universe. Objects don’t allow onLoad capability like pages which could be a solution. Also Opacity can be another solution but seems to be impossible due to same problem.
Anyone has any suggestions? I want to hide a section until its actual data is loaded, as it shows default data until it populate the actual content and it is not nice.
You can do this with conditional rendering, and listen to the data/the fetching state. Then display conditionally the div/section.
Static collections don’t get fetching state 
or else i couldnt find it…
Isn’t there even is_fetched or something like that? Maybe you can listen to the array length of your collection, if it is 0 it means that there are no items fetched, otherwise you display the element. Could you screenshot me your collection in the editor? I’ve not used static collections yet))
I created a parameter and triggering it after a delay on page load which is giving me enough time to load the data, and showing loader while loading, hiding it and showing content after delay… worked fine…
only if we can put transition to those appearing and disappearing objects, would be great…
There are some cheats to make this work, but I don’t think it is worth the struggles)
I’ll leave this here
@Broberto Is there a way to also make the element not clickable when it “disappear”? I am trying to transform (on its X axis) and make the form “appear” on a click event on a button, then “hide” it when I want to remove it. But when I “hide” it, the form’s inputs are clickable, invisible, and the submission buttons still works and it takes space on the page.
You can play with scale transform and overflow
You are a genius and a friend. Thanks so much. The scale set to 0 and overflow set to hidden is what I needed.
Curious about this same issue, but use case is a little different. Say I have a collection list of data, and I click a button to filter the set. The items change immediately, instantly, and I’d like to apply a fade or transition or something. Is that not possible? Would it work if I transition the opacity from 0.7 to 1.0 in 200 milliseconds or something?