Does animation target the wrong element?

[stenci]

Add a button to a form and add this code:

    def form_show(self, **event_args):
        fade_to_orange = Effect(Transition(backgroundColor=['white', 'orange']), duration=2000)
        fade_to_orange.animate(self.button_1).wait()
        self.button_1.background = 'orange'

I was expecting for both the background colors to target the same element, that is the button, instead the animation targets the div that contains the button.

This is what I see during the animation:

This is what I see after the animation:

Does it work as expected and I need to change something when I call animate?
Or the problem is in the animation module?

[s-cork]

Buttons are annoying in anvil. They have a container element around the main button element. We might want to make this the default (it's the default for the augment library) ie special case an anvil button.

The current approach would be to pass the button dom node to the animate method.

Something like.

from anvil.js import get_dom_node

# target the button dom node
button_el = get_dom_node(self.button).firstElementChild
animate(button_el)