You can try the following two ways:
[01] Revising the frame and background (Prioritize)
**OR**
[02] Replace the `.animation(.spring().delay(0.3), value: show)` line with the `.animation(.easeInOut(duration: 0.4), value: show)` line
The code you wrote looks like this:
struct StackAnimation: View {
@State var show: Bool
var body: some View {
ZStack {
Button {
show.toggle()
} label: {
Text("Show View")
}
ZStack{
VStack{
if show {
VStack(spacing: 0) {
VStack {
Text("Header")
}
//[01]
//.frame(maxWidth: .infinity, maxHeight: 30.0)
//.background(Color.white)
.frame(maxHeight: 30)
Text("Detail")
//[01]
//.frame(maxWidth: .infinity, maxHeight: .infinity)
//.background(Color.white)
.frame(maxHeight: .infinity)
}
//[01]
.frame(maxWidth: .infinity)
.background(Color.white)
.cornerRadius(10.0).padding(.top, 20)
.transition(.move(edge: .bottom))
}
}
//[02]
.animation(.spring().delay(0.3), value: show)
//.animation(.easeInOut(duration: 0.4), value: show)
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.green)
}
}
struct StackAnimation_Previews: PreviewProvider {
static var previews: some View {
StackAnimation(show: false)
}
}
Result:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/t7cEe.gif
struct ContentView1: View {
var body: some View {
NavigationView {
ScrollView {
VStack {
CategoryListView {
CategoryView()
}
CategoryListView {
SquareCategoryView()
}
CategoryListView {
RectangleCategoryView()
}
}
.padding()
}
.navigationTitle("Featured")
}
}
}
struct CategoryListView<Content>: View where Content: View {
private let viewSize: CGFloat = 150
var content: () -> Content
init(@ViewBuilder content: @escaping () -> Content) {
self.content = content
}
var body: some View {
VStack {
HStack {
Text("Category name")
Spacer()
}
ScrollView(.horizontal, showsIndicators: false){
HStack {
ForEach(0..<10) { _ in
content()
}
}
}
}
}
}
struct ContentView1_Previews: PreviewProvider {
static var previews: some View {
ContentView1()
}
}
struct CategoryView: View {
private let viewSize: CGFloat = 150
var body: some View {
Circle()
.fill()
.foregroundColor(.blue)
.frame(width: viewSize, height: viewSize)
}
}
struct RectangleCategoryView: View {
private let viewSize: CGFloat = 350
var body: some View {
Rectangle()
.fill()
.foregroundColor(.blue)
.frame(width: viewSize, height: viewSize * 9 / 16)
}
}
struct SquareCategoryView: View {
private let viewSize: CGFloat = 150
var body: some View {
Rectangle()
.fill()
.foregroundColor(.blue)
.frame(width: viewSize, height: viewSize)
}
}
[![][1]][1]
[1]: https://i.stack.imgur.com/cgyjp.png
