Add parentEnter/parentExit props to ViewTransition (#36690)
GitHub Commits - Example: React

Add parentEnter/parentExit props to ViewTransition (#36690)

Add parentEnter/parentExit props to ViewTransition (#36690)

An alternative to https://github.com/facebook/react/pull/36135

Adds experimental support for parentEnter and parentExit on nested <ViewTransition> components, so descendants can animate when an ancestor boundary enters or exits. This is gated behind the enableViewTransitionParentEnterExit feature flag.

Addresses the use case of animating individual items in a list (such as sliding inactive feed posts off-screen) when a parent <ViewTransition> is the one being added or removed during the update.

Today, exit/enter only fire on the <ViewTransition> that was directly mounted or unmounted. Nested boundaries in the same subtree are not visited for their own exit/enter when the whole tree goes away as one unit, which is usually what you want. But some cases need an explicit opt-in to nested animations.

New Props and Behavior

This PR adds parentEnter/parentExit, and their handlers onParentEnter/onParentExit. When an ancestor runs a real enter or exit, React walks descendants and activates boundaries that define the nested props.

This only continues through <ViewTransition> nodes that define parentEnter / parentExit / onParentEnter / onParentExit / onGestureParentEnter / onGestureParentExit, otherwise the chaining stops.

A boundary's own enter/exit still do not run when only an ancestor animates. So it is possible to have different animations on the same <ViewTransition> for enter vs parentEnter.

Example Usage

function ExampleOnAncestorExit() {
  return (
    // This boundary exits - starts the parentExit walk
    <ViewTransition exit="panel-exit">
      <div>
        {/* ✓ Activates: parentExit set. Walk continues inside */}
        <ViewTransition parentExit="slide-out">
          <div>
            {/* ✗ parentEnter is not consulted on an exit walk */}
            <ViewTransition parentEnter="slide-in">
              ...
            </ViewTransition>

            {/* ✗ Chain broken: no parentExit or onParentExit */}
            <ViewTransition>
              <div>
                {/* ✗ Never reached on this path, blocked by parent above */}
                <ViewTransition parentExit="slide-out">
                  ...
                </ViewTransition>
              </div>
            </ViewTransition>

            {/* ✓ Handler-only chain: onParentExit continues the walk */}
            <ViewTransition onParentExit={() => animateOut()}>
              <ViewTransition onParentExit={() => animateDeepOut()}>
                ...
              </ViewTransition>
            </ViewTransition>

            {/* ✓ Activates: sibling under the chain */}
            <ViewTransition parentExit="slide-out">
              ...
            </ViewTransition>
          </div>
        </ViewTransition>
      </div>
    </ViewTransition>
  );
}

Commit Details

Commit ec0fca3 authored

  • 17 files changed
  • Lines changed: 1501 additions & 0 deletions

File tree

  • fixtures/view-transition/src/components
  • packages
    • react-dom/src/__tests__
    • react-reconciler/src

Lines changed: 212 additions & 0 deletions

Original file line number Diff line number Diff line change
1 +
2 +
3 +
4 +
5 +
6 +
7 +
8 +
9 +
10 +
11 +
12 +
13 +
14 +
15 +
16 +
17 +
18 +
19 +
20 +
21 +
22 +
23 +
24 +
25 +
26 +
27 +
28 +
29 +
30 +
31 +
32 +
33 +
34 +
35 +
36 +
37 +
38 +
39 +
40 +
41 +
42 +
43 +
44 +
45 +
46 +
47 +
48 +
49 +
50 +
51 +
52 +
53 +
54 +
55 +
56 +
57 +
58 +
59 +
60 +
61 +
62 +
63 +
64 +
65 +
66 +
67 +
68 +
69 +
70 +
71 +
72 +
73 +
74 +
75 +
76 +
77 +
78 +
79 +
80 +
81 +
82 +
83 +
84 +
85 +
86 +
87 +
88 +
89 +
90 +
91 +
92 +
93 +
94 +
95 +
96 +
97 +
98 +
99 +
100 +
101 +
102 +
103 +
104 +
105 +
106 +
107 +
108 +
109 +
110 +
111 +
112 +
113 +
114 +
115 +
116 +
117 +
118 +
119 +
120 +
121 +
122 +
123 +
124 +
125 +
126 +
127 +
128 +
129 +
130 +
131 +
132 +
133 +
134 +
135 +
136 +
137 +
138 +
139 +
140 +
141 +
142 +
143 +
144 +
145 +
146 +
147 +
148 +
149 +
150 +
151 +
152 +
153 +
154 +
155 +
156 +
157 +
158 +
159 +
160 +
161 +
162 +
163 +
164 +
165 +
166 +
167 +
168 +
169 +
170 +
171 +
172 +
173 +
174 +
175 +
176 +
177 +
178 +
179 +
180 +

Lines changed: 180 additions & 0 deletions

Original file line number Diff line number Diff line change
1 +
2 +
3 +
4 +
5 +
6 +
7 +
8 +
9 +
10 +
11 +
12 +
13 +
14 +
15 +
16 +
17 +
18 +
19 +
20 +
21 +
22 +
23 +
24 +
25 +
26 +
27 +
28 +
29 +
30 +
31 +
32 +
33 +
34 +
35 +
36 +
37 +
38 +
39 +
40 +
41 +
42 +
43 +
44 +
45 +
46 +
47 +
48 +
49 +
50 +
51 +
52 +
53 +
54 +
55 +
56 +
57 +
58 +
59 +
60 +
61 +
62 +
63 +
64 +
65 +
66 +
67 +
68 +
69 +
70 +
71 +
72 +
73 +
74 +
75 +
76 +
77 +
78 +
79 +
80 +
81 +
82 +
83 +
84 +
85 +
86 +
87 +
88 +
89 +
90 +
91 +
92 +
93 +
94 +
95 +
96 +
97 +
98 +
99 +
100 +
101 +
102 +
103 +
104 +
105 +
106 +
107 +
108 +
109 +
110 +
111 +
112 +
113 +
114 +
115 +
116 +
117 +
118 +
119 +
120 +
121 +
122 +
123 +
124 +
125 +
126 +
127 +
128 +
129 +
130 +
131 +
132 +
133 +
134 +
135 +
136 +
137 +
138 +
139 +
140 +
141 +
142 +
143 +
144 +
145 +
146 +
147 +
148 +
149 +
150 +
151 +
152 +
153 +
154 +
155 +
156 +
157 +
158 +
159 +
160 +
161 +
162 +
163 +
164 +
165 +
166 +
167 +
168 +
169 +
170 +
171 +
172 +
173 +
174 +
175 +
176 +
177 +
178 +
179 +
180 +

0 commit comments

Read on GitHub Commits - Example: React ↗ ← Back to News

Comments

No comments yet. Start the discussion.