From ee0a8804f32ca4e48eddca2b0f25f64f7ba6063d Mon Sep 17 00:00:00 2001
From: Daniel Kelly <me@danielkelly.io>
Date: Tue, 20 Feb 2024 14:00:16 -0600
Subject: [PATCH 1/2] docs: add transition + key example

---
 src/guide/built-ins/transition.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/guide/built-ins/transition.md b/src/guide/built-ins/transition.md
index 416462dce9..d2eccdc583 100644
--- a/src/guide/built-ins/transition.md
+++ b/src/guide/built-ins/transition.md
@@ -581,6 +581,31 @@ This can be useful when you've defined CSS transitions / animations using Vue's
 
 You can also apply different behavior in JavaScript transition hooks based on the current state of your component. Finally, the ultimate way of creating dynamic transitions is through [reusable transition components](#reusable-transitions) that accept props to change the nature of the transition(s) to be used. It may sound cheesy, but the only limit really is your imagination.
 
+## Transitions with the Key Attribute {#transitions-with-the-key-attribute}
+
+Sometimes you need to force the re-render of a DOM element in order for a transition to occur.
+
+Take this counter component for example.
+
+```vue-html
+<script setup>
+import { ref } from 'vue';
+const count = ref(0);
+
+setInterval(() => count.value++, 1000);
+</script>
+
+<template>
+  <Transition>
+    <span :key="count">{{ count }}</span>
+  </Transition>
+</template>
+```
+
+If we had excluded the `key` attribute, only the text node would be updated and thus no transition would occur. However, with the `key` attribute in place, Vue knows to create a new `span` element whenever `count` changes and thus the `Transition` component has 2 different elements to transition between.
+
+[Try it in the Playground](https://play.vuejs.org/#eNp9UsFu2zAM/RVCl6Zo4nhYd/GcAtvQQ3fYhq1HXTSFydTKkiDJbjLD/z5KMrKgLXoTHx/5+CiO7JNz1dAja1gbpFcuQsDYuxtuVOesjzCCxx1MsPO2gwuiXnzkhhtpTYggbW8ibBJlUV/mBJXfmYh+EHqxuITNDYzcQGFWBPZ4dUXEaQnv6jrXtOuiTJoUROycFhEpAmi3agCpRQgbzp68cA49ZyV174UJKiprckxIcMJA84hHImc9oo7jPOQ0kQ4RSvH6WXW7JiV6teszfQpDPGqEIK3DLSGpQbazsyaugvqLDVx77JIhbqp5wsxwtrRvPFI7NWDhEGtYYVrQSsgELzOiUQw4I2Vh8TRgA9YJqeIR6upDABQh9TpTAPE7WN3HlxLp084Foi3N54YN1KWEVpOMkkO2ZJHsmp3aVw/BGjqMXJE22jml0X93STRw1pReKSe0tk9fMxZ9nzwVXP5B+fgK/hAOCePsh8dAt4KcnXJR+D3S16X07a9veKD3KdnZba+J/UbyJ+Zl0IyF9rk3Wxr7jJenvcvnrcz+PtweItKuZ1Np0MScMp8zOvkvb1j/P+776jrX0UbZ9A+fYSTP)
+
 ---
 
 **Related**

From d400ed5f25645a25ea7e7a9774b55bdf755bc80b Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Wed, 21 Feb 2024 03:16:10 +0530
Subject: [PATCH 2/2] Update src/guide/built-ins/transition.md

---
 src/guide/built-ins/transition.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/guide/built-ins/transition.md b/src/guide/built-ins/transition.md
index d2eccdc583..4f3628d489 100644
--- a/src/guide/built-ins/transition.md
+++ b/src/guide/built-ins/transition.md
@@ -587,7 +587,7 @@ Sometimes you need to force the re-render of a DOM element in order for a transi
 
 Take this counter component for example.
 
-```vue-html
+```vue
 <script setup>
 import { ref } from 'vue';
 const count = ref(0);