swiftui - 从屏幕外动画视图（底部）

Question

好的，我对 swiftui 动画感到困惑。我了解了基础知识（我认为），但是如何获得从屏幕绝对底部到最终位置的动画/过渡视图 - 我似乎无法得到这个......我已经尝试过偏移和尝试使用 Spacer() 更改布局，但解决方案让我望而却步

struct CardView: View {
let card: Card
var body: some View{

    VStack { 
        Spacer()
            Text("\(card.factor1) X \(card.factor2)")
                .font(.title)
                .foregroundColor(.black)

                .multilineTextAlignment(.center)
                .padding(.horizontal)
                Spacer()
    }
    .padding()
    .frame(width: 300, height: 200)
    .background(
      Rectangle()
           .foregroundColor(cardColor(of: card))
    )

}

func cardColor(of card: Card) -> Color {
    return Color(red:228/255, green: 229/255, blue: 229/255)
}
}

struct AnswerView: View {
let card: Card
var body: some View {
    HStack {
        Spacer()
        ForEach(card.possibleAnswers, id:\.self) { answer in
            Text("\(answer)")
                .foregroundColor(.black)
                .frame(width: 75, height: 50)
                .background(
                  Rectangle()
                       .foregroundColor(cardColor(of: card))
                )
            Spacer()
        }
    }
}

func cardColor(of card: Card) -> Color {
    return Color(red:228/255, green: 229/255, blue: 229/255)
}
}

struct ContentView: View {
@StateObject var deck = Deck()
@State private var isActive = false

var cardActive = false

var body: some View {
    ZStack {
        VStack {
            Text("Total Cards: \(deck.count)")
            if isActive {

           if let card = deck.cards[0] {
                Spacer()
                CardView(card: card)
                  .transition(.move(edge: .bottom))
                    .animation(.easeInOut(duration: 1))
                    .padding()
              AnswerView(card: card)
                  .transition(.move(edge: .bottom))
                .animation(.easeInOut(duration: 1).delay(1))
                Spacer()
                    
            }

        } else {
            Button(action: {
                    isActive.toggle()
            }) {
            ZStack {
                    RoundedRectangle(cornerRadius: 25, style: .continuous)
                        .fill(Color.gray)
                        .opacity(0.5)
                    Text("Begin")
                        .foregroundColor(.black)
            }
            .frame(width: 225, height: 25)
            .padding(5)
            }
           }
    }
    }
    }
  }