Smooth Visible Transition

Anvil Q&A
1

Has anyone done a nice, smooth transition from visible and invisible, particularly for component panels?

Asking on the off chance someone has, so I don’t have to … :slight_smile:

2

A component becomes invisible by acquiring the visible-false CSS class. You could absolutely use CSS transitions to handle this. You’d need to be a bit clever - the CSS display property doesn’t accept transitions, so you’d want to override the display: none in the standard Anvil CSS, and then use some other way to hide your component (height: 0; overflow: hidden; is quite popular).

It can definitely be done, though!

1 Like
3

Hi David,

What do you think about how this looks?

com-video-to-gif%20(19)
ezgif.com-video-to-gif (19).gif800×450 593 KB

Basically, it works as follows:

  • place a column panel inside a link container
  • set up a custom role for an “opacity” transition and add the corresponding CSS 
    • /* Al hack transition out */
.anvil-role-transition_out {
   opacity: 1;
   transition: opacity 1s ease-out;
   -moz-transition: opacity 1s ease-out;
   -webkit-transition: opacity 1s ease-out;
   }

.anvil-role-transition_out:focus {
      opacity: 0;
    }
  • use time.sleep() to allow time for the transition, prior to setting visibility to False

Here’s the clone:
https://anvil.works/build#clone:QEJVPDVPC5KT2IFB=LX6ITGGU2WGPVYNP5GSLVW6Y

I’m not sure if this is what you were looking for but nevertheless I thought I’d have a crack at it.

1 Like
4

Cheers for that.

But I don’t get how it works. I can’t see those roles assigned anywhere?

5

I must’ve deleted the role for the sake of renaming it, and forgotten to add it back; however, the role must’ve been operating somehow despite not being there. How odd. I’ve added the role entry to the clone now.

6

A couple of roles were blank rather than “<default>”, which I think were the offending ones.

Did you change their name or something? Might be a subtle bug there I think …

7

During my testing I had renamed some roles, and then set/reset the components’ role designation in the designer. Odd that they would show blank instead of “<default>”. Perhaps if you set a component’s role, and then delete the role in the Role page, the component is set to blank instead of “<default>”.

The app does function as expected though correct?

8

Yes, that’s what was puzzling me. And when I inspected the elements in the browser they had the appropriate anvil-role-xxx class in them. I just couldn’t see how!

9

Okay cool. Yes, a subtle bug indeed.