Animated regions not working

Maybe is me but Animated regions are nor working. I try to use de Hide delay or hide duration and over UI you cant submit any value. Is like only tittle.

Captura de Pantalla 2024-06-20 a la(s) 13.36.57

If I type manually the code seems to not work

<div is="dmx-animate" id="animate1" showeffect="fadeIn" hideeffect="fadeOut" dmx-bind:visible="steps.value==1" style="background-color: red ;" dmx-bind:hidedelay="2000" dmx-bind:hideduration="2000">

            asdfasdf
        </div>

Show delay and show duration seems to work is only the Hide dont work the UI and dont work animation itself.

Well what exactly are you doing?
Applying a fade in/fade out animations or using an animated region? And what exactly are you trying to achieve?
You can’t apply both…

Thanks @Teodor

I want that on button click, fade out the region, change the content based on a variable and fade in with the new content loaded. I was thinkig to do it with a flow.

But the first thing I notice is that you cant use the hide delay or the hide duration. You cant submit any value. And hide only disappear without any animation.

Captura de Pantalla 2024-06-20 a la(s) 13.36.57

@Teodor

As a suggestion from @franse I switch to App Connect 1 and hide delay and hide duration work. When I update to App Connect 2 hide stops working. In both cases the UI for Hide Delay and Hide Duration are not available. You need to hand code delay and Duration.

App Connect 1 Video

After update do App Connect 2

On console get this error.

Captura de Pantalla 2024-06-20 a la(s) 18.36.40

index.php:1 Uncaught (in promise) undefined

||Promise.then (async)|||
| --- | --- | --- | --- |
||performUpdate|@|dmxAnimateCSS.js:7|
||(anonymous)|@|dmxAppConnect.js:9|
||(anonymous)|@|dmxAppConnect.js:7|
||postMessage (async)|||
||dmx.nextTick|@|dmxAppConnect.js:7|
||setValue|@|dmxAppConnect.js:9|
||Object.keys.forEach.data.<computed>|@|dmxAppConnect.js:9|
||(anonymous)|@|dmxAppConnect.js:9|
||(anonymous)|@|dmxAppConnect.js:9|
||dmx.parse|@|dmxAppConnect.js:9|
||(anonymous)|@|dmxAppConnect.js:9|
||a|@|dmxAppConnect.js:7|

Friendly bump. @patrick

Have an update ready that fixes the issue, please test it.

dmxAnimateCSS.zip (6.3 KB)

Hi the CSS file now is working but the UI in wappler to add "Hide Delete" and "Hide Duration" still not working I dont know if this will be fixed on the next update??

Both attributes need an input field that is missing. You can only add the manually on code view.

Captura de Pantalla 2024-06-20 a la(s) 13.36.57

Hide delay and duration values in the property UI will also be fixed in the next update

Fixed now in Wappler 6.7.2

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.