Slide View Does Not Animate. But Fade Works.

Hi. I am having problems with animating my view sliding in and out and hiding if not in view.

The thing is, fading in and out works. but moving it does not. What could be wrong or what Am i missing?

import SwiftUI

struct MyView: View {
   
  @Binding var isShowing: Bool
   
  var body: some View {
    VStack(spacing: 0) {
      Group {
        row("#ff0000", "color1")
        row("#ff0000", "color2")
        row("#ff0000", "color3")
        row("#ff0000", "color4")
        row("#ff0000", "color5")
        row("#ff0000", "color6")
      }
      Group {
        row("#ff0000", "color7")
        row("#ff0000", "color8")
        row("#ff0000", "color9")
        row("#ff0000", "color10")
        row("#ff0000", "color11")
        row("#ff0000", "color12")
      }
    }
    .frame(maxWidth: 130, maxHeight: 250)
    .background(.white.opacity(0.7))
    .padding()
//    .transition(.move(edge: isShowing ? .leading : .trailing))
    .opacity(isShowing ? 1 : 0)
    .animation(isShowing ? .easeIn(duration: 0.7) : .easeOut(duration: 0.7), value: isShowing)
  }
   
  private func row(_ color: String, _ labelKey: String) -> some View {
    return HStack {
      Rectangle()
        .fill(Color(UIColor(hex: color)))
        .frame(width: 15, height: 15)
        .padding(.leading, 3)
      Text(labelKey.uppercased())
        .foregroundColor(.black)
      Spacer()
    }
  }
}

and this is how to use the view

var body: some View {
    @State private var isShowing = true

HStack {    
    Button("click me", action: {
      isShowing.toggle()
    })
    .padding()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
    .overlay(
      MyView(isShowing: $isShowing),
      alignment: .bottom
    )
}
Answered by chitgoks in 737966022

I got it to work. by adding a condition in the MyView's body

if isShowing {
    VStack(spacing: 0) {
      Group {
        row("#ff0000", "color1")
         ........
}

And this code in the button action

withAnimation {
        isShowingLegend.toggle()
}

I do not understand why it works though. any inputs are appreciated. thank you.

Accepted Answer

I got it to work. by adding a condition in the MyView's body

if isShowing {
    VStack(spacing: 0) {
      Group {
        row("#ff0000", "color1")
         ........
}

And this code in the button action

withAnimation {
        isShowingLegend.toggle()
}

I do not understand why it works though. any inputs are appreciated. thank you.

Slide View Does Not Animate. But Fade Works.
 
 
Q