diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index eb6c81a01..c166a8838 100644
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -1,6 +1,8 @@
 <template>
     <div :class="containerClass">
-        <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)"/>
+        <transition-group name="p-toast-message" tag="div">
+            <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)"/>
+        </transition-group>
     </div>
 </template>
 
diff --git a/src/components/toast/ToastMessage.vue b/src/components/toast/ToastMessage.vue
index d8b0a8908..70f4a0255 100644
--- a/src/components/toast/ToastMessage.vue
+++ b/src/components/toast/ToastMessage.vue
@@ -1,18 +1,16 @@
 <template>
-    <transition name="p-toast-message">
-        <div :class="containerClass">
-            <div class="p-toast-item">
-                <button class="p-toast-icon-close p-link" @click="close">
-                    <span class="p-toast-icon-close-icon pi pi-times"></span>
-                </button>
-                <span :class="iconClass"></span>
-                <div class="p-toast-message">
-                    <span class="p-toast-title">{{message.summary}}</span>
-                    <div class="p-toast-detail">{{message.detail}}</div>
-                </div>
+    <div :class="containerClass">
+        <div class="p-toast-item">
+            <button class="p-toast-icon-close p-link" @click="close">
+                <span class="p-toast-icon-close-icon pi pi-times"></span>
+            </button>
+            <span :class="iconClass"></span>
+            <div class="p-toast-message">
+                <span class="p-toast-title">{{message.summary}}</span>
+                <div class="p-toast-detail">{{message.detail}}</div>
             </div>
         </div>
-    </transition>
+    </div>
 </template>
 
 <script>
diff --git a/src/views/message/MessageDemo.vue b/src/views/message/MessageDemo.vue
index 7f167376b..8c2567428 100644
--- a/src/views/message/MessageDemo.vue
+++ b/src/views/message/MessageDemo.vue
@@ -17,7 +17,9 @@
             <h3>Dynamic</h3>
             <Button label="Show" @click="addMessages()" />
             <Button label="Clear" @click="removeMessages()" class="p-button-secondary"/>
-            <Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
+            <transition-group name="p-messages" tag="div">
+                <Message v-for="msg of messages" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
+            </transition-group>
 
             <h3>Auto Dismiss</h3>
             <Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index 54b70d2c2..d213daf8c 100644
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -250,7 +250,10 @@ import Message from 'primevue/message';
 			&lt;h3&gt;Dynamic&lt;/h3&gt;
 			&lt;Button label="Show" @click="addMessages()" /&gt;
 			&lt;Button label="Clear" @click="removeMessages()" class="p-button-secondary"/&gt;
-			&lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
+
+            &lt;transition-group name="p-messages" tag="div"&gt;
+                &lt;Message v-for="msg of messages" :severity="msg.severity" :key="msg.content"&gt;{{msg.content}}&lt;/Message&gt;
+            &lt;/transition-group&gt;
 
 			&lt;h3&gt;Auto Dismiss&lt;/h3&gt;
 			&lt;Message severity="warn" :life="10000" :sticky="false"&gt;This message will hide in 10 seconds.&lt;/Message&gt;