Possible to animate mushroom-light-card collapsible_controls?

Configuration Frontend
1

I like freeing up space on a card when the lights are off.
However, it feels a little janky when the light controls disapear and reappear without animation.

Does anyone know if it’s possible, or how, to animate in/out on collapse?

I’ve tried transition: height 0.5s ease-in-out; but it doesn’t have an affect.

type: custom:mushroom-light-card
      card_mod:
        style: |
          ha-card {
            transition: height 0.5s ease-in-out;
          }
      entity: light.office
      use_light_color: true
      show_brightness_control: true
      show_color_control: true
      show_color_temp_control: true
      collapsible_controls: true
      layout: horizontal
      fill_container: false
      primary_info: none
      secondary_info: none
      icon_type: none

The transition is just jarring.

XRecorder_Edited_20250128_01

2

Interesting question…

This is just a sample fade-in that may stoke some idea

type: custom:mod-card
card:
  type: custom:mushroom-light-card
  entity: light.xxxx
card_mod:
  style: |
    ha-card {
      {% if is_state('light.xxxx', 'on') %}
       *{ animation: fade-in 5s; transform-origin: 15%;}
      {% else %}   
        display: none;
      {% endif%}
        }
      @keyframes fade-in {
       0% { transform: scale(0); opacity:0; }
       100% { transform: scale(1); opacity: 1; }
        }
3

I would try first to set opacity to 0 in animation, then hide immediately.

4

Thanks for the responses peeps. But, after trying a few different options, nothing really looks good.

I decided to just turn off the collapse for now. Going grey is far less jarring.
Now I just need to figure out how to make the light-card compoenents a smaller height.

5

Check out these threads here and here

6

I’ve searched those with forum search and google site search. I think this is basically something no one else cares about. It’s probably not possible.