Enter & Leave Animation When Element is Shown/Hidden

Wappler General How To
#1

Hi.
I have a few elements on my page which get shown/hidden dynamically (dmx-hide/show) based of user input.
I have set Enter & Leave animations on the elements for a nice smooth transition effect.
But, they only play once. And leave animation does not even work.

When an item is made visible first, animation plays. But if its hidden, leave animation does not play.
And when I make it visible again, the enter animation does not work again.

The inview & outview animations are just meant for elements when they are made visible & invisible while scrolling, so they don’t apply for my case.

Any suggestions on how to make it work?

#2

Hello,
You need to use “Animated Region” for that, place your content inside it:

Screenshot_29
Screenshot_29.jpg770Ă—590 94 KB

Set its animation properties:

Screenshot_30
Screenshot_30.jpg420Ă—616 34.6 KB

Show/Hide it dynamically then, using the animate visibility dynamic attribute:

Screenshot_31
Screenshot_31.jpg420Ă—761 52.1 KB

5 Likes
#3

Missed your answer yesterday. Did not get a notification. :sweat_smile:
This is great. Seems to be working. :slight_smile:
Still adjusting it with my conditions/design. Will post back here with update.

#4

Alright. So I got it to work as per my design.
Just one input: Apart from using Animate Visibility attribute, I also had to use Show attribute with the same condition.

My animate region is inside a repeater. And, if I don’t use Show condition, the animate region does not show its contents, but takes up blank space on the page.

And, because I have both show & hide effects, the next hidden row actually overlaps the current row, and none of the elements of current row are accessible. This is effect I haven’t seen before with CSS.
Its like invisible controls. You can’t see, but if you click at the correct place, a hidden drop down of hidden row can be clicked to show its visible drop down.

#5

Another Update: It doesn’t work well.
With Show in place, only show effect animations works. Hide effect do not work.
And if I remove the Show attribute, to get hide effects, the invisible ghosting issue makes my controls complete unusable.
The animate region has probably not been tested to be used inside a repeater.
@Teodor Any thoughts on this?

#6

You never mentioned repeat regions in your initial post.
Enter and leave animations are the ones to use, when filtering data in the repeat regions. Not sure why would you use dmx-show/hide there?
Please provide a link where i can check what are you doing exactly.

#7

I didn’t think repeater would make a difference. :cold_sweat:
I’ll message you a link.

EDIT: I did try enter/leave animations, but leave animations do not work.