Multi-floor smooth transition

[done7k]

I have adapted the multi-flow example to my case and it works great. But is there any way to make the picture change more smooth?

The example utilizes display CSS property which does not let transition work properly. Maybe someone found another solution to swap SVG layers with transition?

[OzGav]

I just tried the following and this caused a nice fade in effect.

#layer1.amp-layer-visible, #layer1.amp-layer-visible * {
  opacity: 1;
  transition: opacity 1.5s linear !important;
  display: inherit !important;
}

[done7k]

Well, I definitly missing something. My CSS part with these two classes

.layer-visible {
  /* display: inline !important; */ 
  opacity: 1;
  transition: opacity 1.5s linear !important;
  display: inherit !important;
}

.layer-hidden {
  display: none !important; 
}

And the way I set the YAML

    - element: go1-2
      tap_action:
        - service: floorplan.class_set
          service_data:
            elements:
              - layer1
              - layer4
              - layer5
              - layer6
            class: layer-hidden
        - service: floorplan.class_set
          service_data:
            elements:
              - layer7
              - layer8
            class: layer-visible
    - element: go2-1
      tap_action:
        - service: floorplan.class_set
          service_data:
            elements:
              - layer1
              - layer4
              - layer5
              - layer6
            class: layer-visible
        - service: floorplan.class_set
          service_data:
            elements:
              - layer7
              - layer8
            class: layer-hidden
    - 

I do not see any fading effect.

[exetico]

You need to adjust opacity to 0, else you won't see any effect, cause opacity stays as 0 at all time.

But I bet you'll get in trouble, cause display:none will be fired instant. And opacity will only toggle the opacity, and still be above the other layer 😅...

Note that you cant add effects to the display property.

Another take would be to add the effect to max-height.

[done7k]

Before opening this ticket I have been playing with max-height also w/o success.. (( Ok. will continue..

[OzGav]

I am not sure if this makes a difference but I noticed that yours isn't exactly the same as mine. I can't remember where I found the example but you will see with mine I have styles for each layer (I have five layers as this is remote control with five components but I am just showing two). So more completely this is my CSS (you just need to add the transition I had above as I don't normally have this):

#layer1.amp-layer-visible, #layer1.amp-layer-visible * {
  opacity: 1;
  display: inherit !important;
}
#layer2.amp-layer-visible, #layer2.amp-layer-visible * {
  opacity: 0;
  display: none !important;
}
#layer2.projector-layer-visible, #layer2.projector-layer-visible * {
  opacity: 1;
  display: inherit !important;
}
#layer1.projector-layer-visible, #layer1.projector-layer-visible * {
  opacity: 0;
  display: none !important;
}

and the yaml:

        - element: amp.button
          tap_action:
            - service: floorplan.class_set
              service_data:
                classes:
                class: amp-layer-visible
                elements:
                  - layer1
                  - layer2
        - element: projector.button
          tap_action:
            - service: floorplan.class_set
              service_data:
                classes:
                class: projector-layer-visible
                elements:
                  - layer1
                  - layer2

So in case you have nested elements I would start by changing your CSS to:

.layer-visible, .layer-visible * {
  /* display: inline !important; */ 
  opacity: 1;
  transition: opacity 1.5s linear !important;
  display: inherit !important;
}

.layer-hidden, .layer-hidden * {
  opacity: 0;
  display: none !important; 
}

If that doesn't work try classes for each layer as I have.

[exetico]

Great input from OzGav.

Consider to share your work including the code, so other people can see and learn from it 😊.