title: Images don't animate with their frames when animating VStack height change
body: <p>I'm trying to make a simple collapse/expand item by using a VStack with conditional items in it.</p>
  <p>When the new items are added to the vstack, the height of the vstack grows, the elements that were already present move up, and the new items fade in. However, an image that was part of the elements already present, animates at a different rate than the text it's with (or even it's frame as seen by coloring the background).</p>
  <p>Is there a way to make the image animate correctly? Alternatively, is there a way to make the vstack expand down, as opposed to expanding from the middle, therefore keeping me from needing to animate the information that is already there?</p>
  <p>Here's what I'm seeing, where the image background is colored purple:</p>
  <p><a href="https://i.stack.imgur.com/URgVw.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/URgVw.gif" alt="screen capture of buggy behavior" /></a></p>
  <p>Code:</p>
  <pre><code>struct Item: View {
      @State private var collapsed = true
      
      var body: some View {
          VStack {
              HStack {
                 Image(systemName: collapsed ? &quot;iphone&quot; : &quot;globe&quot;)
                  .opacity(collapsed ? 1 : 1)
                  .animation(Animation.linear(duration: 2).repeatCount(1))
                  .background(Color.purple)
                  Text(&quot;Main text&quot;)
  
                  Spacer()
              }
              .onTapGesture {
                  withAnimation(.linear(duration: 2)) {
                      collapsed.toggle()
                  }
              }
              
              if !collapsed {
                  HStack {
                      Text(&quot;\(Image(systemName: &quot;pencil&quot;)) Edit this thing&quot;)
                      Spacer()
                  }
              }
          }
      }
  }
  </code></pre>