ios – Drawback modifying `DatePicker` animation with `.transition` modifier


Including .transition modifier to a conditionally displayed DatePicker does not work. It is animated with a default fade transition. Making use of the identical modifier to additionally conditionally displayed Textual content nonetheless, works as anticipated. What am i lacking?

struct AddScheduleForm: View {
  @State non-public var startDate: Date = Date.now
  @State non-public var hasEndDate: Bool = false
  @State non-public var showEndDate: Bool = false
  @State non-public var endDate: Date = Calendar.autoupdatingCurrent.date(byAdding: .weekOfYear, worth: 1, to: Date.now)!

  var physique: some View {
    NavigationView {
      Type {
        Part {
          DatePicker("Begin date", choice: $startDate, displayedComponents: [.date])
          Toggle(isOn: Binding(get: {
            hasEndDate
          }, set: { worth in
            hasEndDate = worth
            showEndDate = worth
          })) {
            Button {
              if hasEndDate {
                showEndDate.toggle()
              }
            } label: {
              VStack(alignment: .main, spacing: 0) {
                Textual content("Finish date")
                  .foregroundColor(.main)
                if hasEndDate {
                  Textual content("(endDate.formatted(.dateTime.yr().month(.broad).day()))")
                    .font(.caption)
                    .foregroundColor(.blue)
//                  .transition(.slide) // this works 
                }
              }
            }
            .disabled(!hasEndDate)
          }

          
          if showEndDate {
            DatePicker("", choice: $endDate,
                       in: startDate...Date.distantFuture,
                       displayedComponents: [.date])
            .datePickerStyle(.graphical)
            .listRowInsets(.init(high: 0, main: 8, backside: 8, trailing: 8))
            .transition(.slide) // this does not work
          }
        }
      }
      .animation(.default, worth: hasEndDate)
      .animation(.default, worth: showEndDate)
    }
  }
}

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles