diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md
index 8d2ad970bd..0d0d73efd8 100644
--- a/src/guide/transitions-enterleave.md
+++ b/src/guide/transitions-enterleave.md
@@ -590,4 +590,9 @@ Vue.createApp(Demo).mount('#demo')
 }
 ```
 
-<!-- TODO: codepen -->
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="WNwVxZw" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transitioning between components">
+  <span>See the Pen <a href="https://codepen.io/team/Vue/pen/WNwVxZw">
+  Transitioning between components</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>