How to avoid reduced opacity when hiding view with animation in SwiftUI

Issue #679

While redesigning UI for my app Push Hero, I ended up with an accordion style to toggle section.

It worked great so far, but after 1 collapsing, all image and text views have reduced opacity. This does not happen for other elements like dropdown button or text.

extension View {
    func sectionBackground(_ title: String, _ shows: Binding<Bool>) -> some View {
        VStack(alignment: .leading) {
            HStack {
                Text(title.uppercased())
                Spacer()
                if shows != nil {
                    SmallButton(
                        imageName: "downArrow",
                        tooltip: shows!.wrappedValue ? "Collapse" : "Expand",
                        action: {
                           withAnimation(.easeInOut) {
                                shows!.wrappedValue.toggle()
                            }
                        }
                    )
                    .rotationEffect(.radians(shows!.wrappedValue ? .pi : 0))
                }
            }

            if shows.wrappedValue {
                self
            }
        }
    }
}

The culprit is that withAnimation, it seems to apply opacity effect. So the workaround is to disable animation wrappedValue, or to tweak transition so that there’s no opacity adjustment.

if shows.wrappedValue {
    self.transition(AnyTransition.identity)
}