An interesting animation with SwiftUI's LazyVGrid on multiple items insert and remove - animation

Question

I have a button where let the user see some more of the items on tap. Initially it's shows of 4 items. After tap, I add rest of the items to the list and for less, I just show the first 4 items. The default animation gets weird every time playing with it. It's overlapping, comes from bottom. For demonstration purpose, I have slow down the animations in simulator.
You can find a demonstration app's source code: https://github.com/nesimtunc/swiftui-playground
Basically this is the whole code.
What's wrong with my implementation? Why this default animation is like this? How can I implement one without side effects?
PS: I have already tried MatchedGeometry and it didn't helped.
Thank you!
import Foundation
import SwiftUI
class ItemModel<T>: NSObject, ObservableObject {
var items: [T]
let showMoreText: String
let showLessText: String
let visibleItemsCount: Int
#Published var visibleItems: [T] = []
#Published var showAll: Bool = false
#Published var toggleText: String = ""
init(
items: [T],
showMoreText: String,
showLessText: String,
visibleItemsCount: Int,
showAll: Bool = false
) {
self.items = items
self.showMoreText = showMoreText
self.showLessText = showLessText
self.visibleItemsCount = visibleItemsCount
self.showAll = showAll
visibleItems = showAll ? items : Array(items.prefix(visibleItemsCount))
toggleText = showAll ? showLessText : showMoreText
}
func toggle() {
showAll.toggle()
update()
}
private func update() {
visibleItems = showAll ? items : Array(items.prefix(visibleItemsCount))
toggleText = showAll ? showLessText : showMoreText
}
}
struct ContentView: View {
private var col = Array(repeating: GridItem(.flexible(), spacing: 16), count: 2)
private let visibleItemsCount = 4
private let spacing: CGFloat = 16.0
#ObservedObject private var model: ItemModel<Int>
init() {
var newItems = [Int]()
for i in 0..<10 {
newItems.append(i)
}
self.model = ItemModel(items: newItems,
showMoreText: "Show More",
showLessText: "Show Less",
visibleItemsCount: visibleItemsCount)
}
var body: some View {
ScrollView {
LazyVGrid(columns: col , alignment: .center, spacing: spacing) {
ForEach(model.visibleItems, id: \.self) { i in
Text("\(i)")
.frame(maxWidth: .infinity, minHeight: 100)
.font(.title)
.foregroundColor(Color.white)
.background(Rectangle().fill(Color.orange))
}
}
Button {
withAnimation {
model.toggle()
}
} label: {
Text(model.toggleText)
.fontWeight(.semibold)
.foregroundColor(Color.primary)
.frame(maxWidth: .infinity, minHeight: 50)
.background(Capsule().strokeBorder(Color.secondary, lineWidth: 1.5))
}
// This is on for demonstartion purpose, using same data but with whole
LazyVGrid(columns: col , alignment: .center, spacing: spacing) {
ForEach(model.items, id: \.self) { i in
Text("\(i)")
.frame(width: 100, height: 100, alignment: .center)
.font(.title)
.foregroundColor(Color.white)
.background(Rectangle().fill(Color.blue))
}
}
}.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView()
.environment(\.sizeCategory, .small)
.previewDevice("iPhone 13 Pro Max")
.previewLayout(.device)
}
}
}

Answer 1

LazyVGrid is lazy, its whole content size is not always ready to animate when putting inside a ScrollView. There's a conflict I guess. I would prefer to keep only one LazyVGrid.
var body: some View {
ScrollView {
LazyVGrid(columns: col , alignment: .center, spacing: spacing) {
Section(footer: showHideButton) {
ForEach(model.visibleItems, id: \.self) { i in
Text("\(i)")
.frame(maxWidth: .infinity, minHeight: 100)
.font(.title)
.foregroundColor(Color.white)
.background(Rectangle().fill(Color.orange))
}.transaction { $0.animation = nil } // --> this line can be removed
}
Section {
ForEach(20...30, id: \.self) { i in
Text("\(i)")
.frame(maxWidth: .infinity, minHeight: 100)
.font(.title)
.foregroundColor(Color.white)
.background(Rectangle().fill(Color.blue))
}
}
}
}.padding()
}
#ViewBuilder
var showHideButton: some View {
Button {
withAnimation {
model.toggle()
}
} label: {
Text(model.toggleText)
.fontWeight(.semibold)
.foregroundColor(Color.primary)
.frame(maxWidth: .infinity, minHeight: 50)
.background(Capsule().strokeBorder(Color.secondary, lineWidth: 1.5))
}
}
There's another thing called Transitions, please also take a look if you need more advance animations
https://www.objc.io/blog/2022/04/14/transitions/