Right here is the view, which has an "Type Button" and "Cancel" Button on trailing fringe of an textfield. When it’s centered, I need it to animate the buttons ("Type Button" and "Cancel") transferring out and in.
struct TextFieldFocusAnimation: View {
@FocusState personal var isFocused: Bool
var physique: some View {
HStack {
TextField("", textual content: .fixed(""))
.centered($isFocused)
.border(.crimson)
if !isFocused {
Button("Type Button") {
print("Type clicked")
}
.transition(.transfer(edge: .main))
} else {
Button("Cancel") {
isFocused = false
}
.transition(.transfer(edge: .trailing))
}
}
.padding()
.transformEffect(.id) // That is to isolate the geometry
.animation(.snappy, worth: isFocused)
}
}
The ensuing animation seems like this:
Notice, how the buttons are popping in, as a substitute of sliding.
I can inform the transitions do usually behave when coded like this too:
Right here, I used @State.
struct NormalPopInAnimation: View {
@State personal var isFocused: Bool = false
var physique: some View {
VStack {
HStack {
TextField("", textual content: .fixed(""))
.border(.crimson)
if !isFocused {
Button("Type Button") {
print("Type clicked")
}
.transition(.transfer(edge: .main))
} else {
Button("Cancel") {
isFocused = false
}
.transition(.transfer(edge: .trailing))
}
}
.padding()
.transformEffect(.id)
Button("Toggle") {
isFocused.toggle()
}
}
.animation(.snappy, worth: isFocused)
.body(maxWidth: .infinity, maxHeight: .infinity)
.ignoresSafeArea()
}
}
I’ve already appeared into Animating modifications to @FocusState SwiftUI , I’m in search of the best way to repair this with out having to introduce one other state or at the very least know the rationale why this does not work the best way I believe it ought to.
