在以编程方式创建的组件上运行过渡

Question

我正在使用此代码

var ComponentClass = Vue.extend(Notification);
var instance = new ComponentClass({
    propsData: {
        notification: notification
    }
});
instance.$mount();
this.$refs.notificationContainer.appendChild(instance.$el);

当通过推送器接收到新通知时以编程方式创建组件，这是我的通知组件

<template>
    <transition
        enter-active-class="transition ease-out duration-100 transform"
        enter-class="opacity-0 scale-95"
        enter-to-class="opacity-100 scale-100"
        leave-active-class="transition ease-in duration-75 transform"
        leave-class="opacity-100 scale-100"
        leave-to-class="opacity-0 scale-95"
    >
        <div class="bg-gray-100 px-4 py-2 border-0 rounded relative mb-4 text-gray-700 flex items-center">
            <div class="flex-shrink-0 h-10 w-10">
                <img
                    class="h-10 w-10 rounded-full"
                    :src="notification.user.profile_photo_url"
                    :alt="notification.user.username"
                >
            </div>
            <span class="inline-block align-middle flex-1 ml-2 mr-4">
                <strong>{{notification.user.username}}</strong> {{notification.message}}
            </span>
            <button class="focus:outline-none">
                <i
                    class="fad fa-times text-red-600"
                ></i>
            </button>
        </div>
    </transition>
</template>

<script>
export default {
    props: {
        notification: Object
    }
}
</script>

但由于某种原因，在创建组件时转换不会运行

Answer 1

通过将appear 添加到过渡元素来修复