Adding .transition
modifier to a conditionally displayed DatePicker
doesn't work. It's animated with a default fade transition. Applying the same modifier to also conditionally displayed Text
however, works as expected. What am i missing?
struct AddScheduleForm: View {
@State private var startDate: Date = Date.now
@State private var hasEndDate: Bool = false
@State private var showEndDate: Bool = false
@State private var endDate: Date = Calendar.autoupdatingCurrent.date(byAdding: .weekOfYear, value: 1, to: Date.now)!
var body: some View {
NavigationView {
Form {
Section {
DatePicker("Start date", selection: $startDate, displayedComponents: [.date])
Toggle(isOn: Binding(get: {
hasEndDate
}, set: { value in
hasEndDate = value
showEndDate = value
})) {
Button {
if hasEndDate {
showEndDate.toggle()
}
} label: {
VStack(alignment: .leading, spacing: 0) {
Text("End date")
.foregroundColor(.primary)
if hasEndDate {
Text("\(endDate.formatted(.dateTime.year().month(.wide).day()))")
.font(.caption)
.foregroundColor(.blue)
// .transition(.slide) // this works
}
}
}
.disabled(!hasEndDate)
}
if showEndDate {
DatePicker("", selection: $endDate,
in: startDate...Date.distantFuture,
displayedComponents: [.date])
.datePickerStyle(.graphical)
.listRowInsets(.init(top: 0, leading: 8, bottom: 8, trailing: 8))
.transition(.slide) // this doesn't work
}
}
}
.animation(.default, value: hasEndDate)
.animation(.default, value: showEndDate)
}
}
}