Slide transition

Question

Created Oct ’19

Replies 2

Boosts 0

Participants 3

public struct Frontside: View
{
  @Binding public var id: Int
  @Binding public var sheet: Bool
  @Binding public var rotate: Bool
 
 
  public var body: some View
  {
    ZStack{
 
     
      RoundedRectangle(cornerRadius: 8, style: .continuous)
        .foregroundColor(backgroundColours[tangoArray[self.id].jlptColour ?? 0])
    
        .frame(width: 140, height: 149)
        .zIndex(0)
 
      VStack {
        Text(tangoArray[self.id].kanji)
     
        .font(.system(size: 24))
        .foregroundColor(textColours[tangoArray[self.id].jlptColour ?? 0])

        .fontWeight(.regular)
        .padding(25)
        .lineLimit(3)
        .truncationMode(.tail)
        .zIndex(1)
       
        Spacer()
      }

      VStack {
        Spacer()
        HStack {
         
          Button(action: {
            incorrect(i: self.id)
            checkAttempts()
            self.id = nextCard()
           
            if justFinishedRevising {
              self.rotate.toggle()
              justFinishedRevising = false
            }
           
            if justFinishedLearning {
              self.rotate.toggle()
              self.sheet = true
              justFinishedLearning = false
            }
           
           
          }) {
            Image(systemName: "xmark")
              .font(.headline)
              .opacity(0.4)
           
          }
         
          Button(action: {
            correct(i: self.id)
            checkAttempts()
            self.id = nextCard()
           
            if justFinishedRevising {
              self.rotate.toggle()
              justFinishedRevising = false
            }
           
            if justFinishedLearning {
              self.sheet = true
              justFinishedLearning = false
            }
          }) {
            Image(systemName: "circle")
              .font(.headline)
              .opacity(0.4)
           
          }

        }
      }
      .zIndex(2)
    }
  }

}

I have a view which is a flashcard. When the user taps on the incorrect button I want the flash card to slide to the left of the screen, and when the user taps on the correct button I want the flash card to transition/slide to the right of the watch screen. How do I do that?

Boost

Answer 1

Claude31 OP

Oct ’19

Did you look at how to create animation for transition ?

https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions

move(edge: leading)

or

move(edge: trailing)

should work.

Look for detailed example here:

h ttps://mecid.github.io/2019/06/26/animations-in-swiftui/

0

Answer 2

fromtoronto OP

May ’20

You've probably already solved this, but for anyone else having issues with slide transition.

One thing to consider is that if the view you want to slide is already tightly bound inside the outer view,

there's no room to slide around in. So it looks like it's not doing anything.

0