Update custom_transitions and sub_states examples to use children macro (#18292)

# Objective

Contributes to #18238 
Updates the `custom_transitions` and `sub_states` examples to use the
`children!` macro.

## Solution

Updates examples to use the Improved Spawning API merged in
https://github.com/bevyengine/bevy/pull/17521

## Testing

- Did you test these changes? If so, how?
- Opened the examples before and after and verified the same behavior
was observed. I did this on Ubuntu 24.04.2 LTS using `--features
wayland`.
- Are there any parts that need more testing?
- Other OS's and features can't hurt, but this is such a small change it
shouldn't be a problem.
- How can other people (reviewers) test your changes? Is there anything
specific they need to know?
  - Run the examples yourself with and without these changes.
- If relevant, what platforms did you test these changes on, and are
there any important ones you can't test?
  - see above

---

## Showcase

n/a

## Migration Guide

n/a

examples/state/custom_transitions.rs

@@ -243,17 +243,16 @@ const PRESSED_BUTTON: Color = Color::srgb(0.35, 0.75, 0.35);
 
 fn setup_menu(mut commands: Commands) {
     let button_entity = commands
-        .spawn(Node {
+        .spawn((
+            Node {
                 // center button
                 width: Val::Percent(100.),
                 height: Val::Percent(100.),
                 justify_content: JustifyContent::Center,
                 align_items: AlignItems::Center,
                 ..default()
-        })
+            },
-        .with_children(|parent| {
+            children![(
-            parent
-                .spawn((
                 Button,
                 Node {
                     width: Val::Px(150.),
@@ -265,18 +264,16 @@ fn setup_menu(mut commands: Commands) {
                     ..default()
                 },
                 BackgroundColor(NORMAL_BUTTON),
-                ))
+                children![(
-                .with_children(|parent| {
-                    parent.spawn((
                     Text::new("Play"),
                     TextFont {
                         font_size: 33.0,
                         ..default()
                     },
                     TextColor(Color::srgb(0.9, 0.9, 0.9)),
-                    ));
+                )]
-                });
+            )],
-        })
+        ))
         .id();
     commands.insert_resource(MenuData { button_entity });
 }

examples/state/sub_states.rs

@@ -156,17 +156,16 @@ mod ui {
 
     pub fn setup_menu(mut commands: Commands) {
         let button_entity = commands
-            .spawn(Node {
+            .spawn((
+                Node {
                     // center button
                     width: Val::Percent(100.),
                     height: Val::Percent(100.),
                     justify_content: JustifyContent::Center,
                     align_items: AlignItems::Center,
                     ..default()
-            })
+                },
-            .with_children(|parent| {
+                children![(
-                parent
-                    .spawn((
                     Button,
                     Node {
                         width: Val::Px(150.),
@@ -178,18 +177,16 @@ mod ui {
                         ..default()
                     },
                     BackgroundColor(NORMAL_BUTTON),
-                    ))
+                    children![(
-                    .with_children(|parent| {
-                        parent.spawn((
                         Text::new("Play"),
                         TextFont {
                             font_size: 33.0,
                             ..default()
                         },
                         TextColor(Color::srgb(0.9, 0.9, 0.9)),
-                        ));
+                    )]
-                    });
+                )],
-            })
+            ))
             .id();
         commands.insert_resource(MenuData { button_entity });
     }
@@ -199,8 +196,7 @@ mod ui {
     }
 
     pub fn setup_paused_screen(mut commands: Commands) {
-        commands
+        commands.spawn((
-            .spawn((
             StateScoped(IsPaused::Paused),
             Node {
                 // center button
@@ -212,10 +208,7 @@ mod ui {
                 row_gap: Val::Px(10.),
                 ..default()
             },
-            ))
+            children![(
-            .with_children(|parent| {
-                parent
-                    .spawn((
                 Node {
                     width: Val::Px(400.),
                     height: Val::Px(400.),
@@ -226,17 +219,15 @@ mod ui {
                     ..default()
                 },
                 BackgroundColor(NORMAL_BUTTON),
-                    ))
+                children![(
-                    .with_children(|parent| {
-                        parent.spawn((
                     Text::new("Paused"),
                     TextFont {
                         font_size: 33.0,
                         ..default()
                     },
                     TextColor(Color::srgb(0.9, 0.9, 0.9)),
+                )]
+            )],
         ));
-                    });
-            });
     }
 }