Hi all, I'm hoping you can help me here, I've been running around for hours trying to figure this out, and from what I can see this hasn't been asked anywhere before.
I'm trying to make a repeater on my website fade out when it is updated with new data, which is done via a dropdown menu. The dropdown filters a dynamic dataset which is to the repeater.
My issue is that when the filter is updated, the repeater immediately updates, then fades out, and then fades back in with the new results, so the repeater actually fades out the new results!
I'm currently running an 'onChange' event on the dropdown menu. I have already tried 'onItemReady' for the repeater itself, as this is supposedly run before any of the items are updated, however I suppose because I'm running a fade, it makes the first adjustment and then changes the results (i.e. the alpha is very slightly changed just before the boxes update).
All I want is to hold the results in the repeater updating until it has faded out.
.next on the fade also does not work in the way I want it to, below is my code, any help is massively appreciated! - Website is southwestspirits.co.uk if you wanted a better look at what I'm struggling with.
let fadeOptions = { "duration": 2000, "delay": 1000 }; //When the filter is changed, or the reset button is clicked. $w("#dropdown1").onChange(() => { resultsTransition(); }); $w("#dropdown2").onChange(() => { resultsTransition(); }); $w("#button12").onClick(() => { resultsTransition(); }); function resultsTransition() { $w('#repeater2').hide("fade") .then (() => { console.log("Faded out..."); return $w('#repeater2').show("fade", fadeOptions); }); } });
try this code
(instead of using await promise update the repeater data)
(delete the lines between the dashed lines)
let fadeOptions = { "duration": 2000, }; async function resultsTransition() { await $w('#text1').hide("fade", fadeOptions) ///mock update data /// --------------------------- await new Promise((res,rej)=>{ setTimeout(()=>{res()},2000) }) --------------------------- $w('#text1').show("fade", fadeOptions); }
let me know if it helped,
Gal.