Slide View Does Not Animate. But Fade Works.

Question

chitgoks OP

Created Nov ’22

Replies 1

Boosts 0

Participants 1

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
    )
}

Boost

Answer 1

chitgoks OP

Nov ’22

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.

1