Why isn't one of the animations active? - ios

Question

I have created a bottom sheet as shown in the code below.
Basically, there are two Views, and the animation in one View works,
but the animation in the other is not enabled, and it switches instantly.
(See the comments in the code for where this is happening.)
How can I get the animations to work?
Code:
import SwiftUI
struct ContentView: View {
#State private var isShow = false
var body: some View {
ZStack {
Button(
"Show Sheet",
action: {
self.isShow.toggle()
}
)
.zIndex(0)
BottomSheet(
isShow: self.$isShow,
content: {
VStack {
Text("A")
Text("B")
Text("C")
}
.frame(
maxWidth: .infinity
)
.background(Color(.yellow))
}
)
.zIndex(1)
}
}
}
struct ScrimView: View {
var body: some View {
VStack {}.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .bottom
)
.background(
Color(.gray)
)
}
}
struct BottomSheet<Content: View>: View {
private let content: () -> Content
#Binding var isShow: Bool
init(
isShow: Binding<Bool>,
content: #escaping () -> Content
) {
self._isShow = isShow
self.content = content
}
var body: some View {
ZStack(alignment: .bottom) {
if self.isShow {
ScrimView().zIndex(
0
)
.transition(.opacity) // <-- not work
.animation(.linear(duration: 5)) // <-- not work
VStack {
Button(
"X",
action: {
self.isShow = false
}
)
self.content()
}
.zIndex(1)
.background(Color(.white))
.cornerRadius(10)
.transition(.move(edge: .bottom)) // <-- work
.animation(.linear(duration: 5)) // <-- work
}
}
}
}

Answer 1

Add the animation out of the condition and set opacity.
var body: some View {
ZStack(alignment: .bottom) {
ScrimView().zIndex( // <-- here work
0
)
.opacity(isShow ? 1 : 0)
.animation(.linear(duration: 5))
Another solution is to set the animation to direct main ZStack
var body: some View {
ZStack(alignment: .bottom) {
if self.isShow {
ScrimView().zIndex(0)
VStack {
Button(
"X",
action: {
self.isShow = false
}
)
self.content()
}
.zIndex(1)
.background(Color(.white))
.cornerRadius(10)
.transition(.move(edge: .bottom))
}
}.animation(.linear(duration: 5))
}
Reason: It does not work because it's direct inside the condition. when you change the toggle it direct reflects with 1 opacity so no effect will shown. your second animation is work because of transition. With your code you can change the toggle inside the animation then it will work or by using the second approach it will also work.