1

I have an inverted list in a chat application. When a new row is added, the default animation is almost like a curtain coming up to reveal the new row. The new row seems to appear from bottom to top. What I want though is the opposite. I want it to appear the new row is sliding up from below the screen so that the top of the new row becomes visible first as it is being animated into place.

It is a requirement that I keep the list inverted for dynamic content scrolling performance.

Currently I am using the following structure:

class Model: ObservableObject {
    @Published var numberArray = [19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
}

struct ContentView: View {
    @StateObject var model = Model()
    var body: some View {
        Button(action: {
            model.numberArray.insert(model.numberArray.count + 1, at: 0)
        }, label: {
            Text("Append Number")
        })
        List {
            ForEach(model.numberArray, id: \.self) { number in
                    Text("The number is: \(number)")
                        .scaleEffect(x: 1, y: -1, anchor: .center)
                        .padding(.horizontal, 30)
                        .padding(.vertical, 8)
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .font(.title)
                }
        }
        .scaleEffect(x: 1, y: -1, anchor: .center)
        .animation(.default)
    }
}

enter image description here

Is there anyway to change this default animation to an animation that reveals the new row from top down rather than bottom up?

alionthego
  • 8,508
  • 9
  • 52
  • 125

0 Answers0