Nodes Stuck at opacity 0 when animating

[hhennies]

I've found this small bug while making a search bar and trying to animate the elements showing up and going away. I've reproduced the bug in the minimal view. When the user press the button it should show all 3 items, but they get stuck with opacity: 0. This happens both in debug and release builds (release builds are using embedded swift)

@View
struct ContentView {
  @State var show: Bool = false

  var body: some View {
    div {
      button { "Show" }.onClick { show = true }
      if show {
        ForEach(["A", "B", "C"], key: \.self) { item in
          p { item }.transition(.fade)
        }
      }
    }
    .animation(.smooth, value: show)
  }
}

[sliemeobn]

thanks for the report!
I found the issue where nested conditionals (eg: ForEach inside if) don't play well with transitions if they change in the same transaction.

unfortunately, the entire transition system is not in a great shape atm, so I don't think there is a good "quick-fix" without re-thinking the entire conditional mounting + transitions machinery.

@hhennies what would you expect to happen if you toggle show in this case? fade in or just appear?

I think the only reasonable thing is that they would fade in, ie: structural nodes like if or ForEach should not count as "an appearing element" (like a DOM node would) - but rather forward this...

[hhennies]

Thank you for the attention!

I agree with your assessment, makes the most sense for them to fade in. That was my expectation at least.