Transition won't work on SolidColor component

[sarenodev]

Transitions isn't working on SolidColor but it works fine in other components such Row, Column, Text, etc. I'm not sure if it was an intended behaviour. The following might be helpful

Version: // Litho implementation 'com.facebook.litho:litho-core:0.29.0' implementation 'com.facebook.litho:litho-widget:0.29.0' kapt 'com.facebook.litho:litho-processor:0.29.0' // SoLoader implementation 'com.facebook.soloader:soloader:0.6.0' // For integration with Fresco implementation 'com.facebook.litho:litho-fresco:0.29.0' // Sections implementation 'com.facebook.litho:litho-sections-core:0.29.0' implementation 'com.facebook.litho:litho-sections-widget:0.29.0' compileOnly 'com.facebook.litho:litho-sections-annotations:0.29.0' kapt 'com.facebook.litho:litho-sections-processor:0.29.0'

@LayoutSpec object UIExpScaleAnimSpec { @OnCreateInitialState fun onCrateInitialState(c: ComponentContext, scale: StateValue ) { scale.set(1f) }

@OnCreateLayout
fun onCreateLayout(c: ComponentContext,
                   @State scale: Float
): Component {
/*    return Column.create(c)
        .heightPercent(100f)
        .child(Column.create(c)
            .transitionKey("anim")
            .widthDip(scale)
            .heightDip(scale)
            .backgroundColor(Color.parseColor("#7B241C"))
            .build())
        .clickHandler(UIExpScaleAnim.onPageClicked(c, scale))
        .build()*/
    return Column.create(c)
        .heightPercent(100f)
        .child(SolidColor.create(c)
            .transitionKey("anim")
            .widthDip(scale)
            .heightDip(scale)
            .color(Color.parseColor("#7B241C"))
            .build())
        .clickHandler(UIExpScaleAnim.onPageClicked(c, scale))
        .build()
}

@OnCreateTransition
fun onCreateTransition(c: ComponentContext
): Transition {
    return Transition.create("anim")
        .animate(AnimatedProperties.WIDTH, AnimatedProperties.HEIGHT)
}

@OnUpdateState
fun updateScale(@Param param: Float, scale: StateValue<Float>) {
    scale.set(param)
}

@OnEvent(ClickEvent::class)
fun onPageClicked(c: ComponentContext,
                  @Param pCurrentScale: Float
) {
    UIExpScaleAnim.updateScale(c, if (pCurrentScale == 1f) 100f else 1f)
}

}

[muraziz]

Hey @dev-sareno, it indeed sounds like a bug. I checked it in our sample app and I can reproduce your case.

TLDR; of what's happening is that when you use SolidColor and transition type is not specified, then the type is LOCAL and in that case we try to match not only transition keys ("anim" in this case), but also the scope of layout declaration (onCreateLayout) and scope of transition declaration (onCreateTransition). The keys match here (both of them are anim), however, scope is slightly different. SolidColor is layoutspec and it renders multiple children, therefore it's scope is smth like "SCOPED(9,7,10)", but transition declaration's scope is "SCOPED(9)" therefore they don't match and no animation runs. In case of Column it doesn't render any extra children, therefore it's scope is "SCOPED(9)" that's why animation runs. Overall, that inner structure should be transparent to developer's so this is likely a bug.

In the meantime you can unblock yourself by using GLOBAL scope for your keys:

in onCreateLayout:

SolidColor.create(c)
            .transitionKey("anim")
            .transitionKeyType(Transition.TransitionKeyType.GLOBAL)

in onCreateTransition:

 Transition.create(Transition.TransitionKeyType.GLOBAL, "anim")
       ...

And here are docs for global vs local keys: https://fblitho.com/docs/transition-key-types

[marco-cova]

Reopening till it's fixed

[colriot]

Hi @dev-sareno, can you check if this one is fixed? We made some fixes in terms of how transitions work with MountSpecs vs LayoutSpecs, and hopefully this'll help