Javascript 是什么原因导致Chrome中Vue.js组件的动画/转换中断？

const NotificationBar={
名称：'通知栏'，
模板：`
{{message}}
`,
道具：{
信息：{
类型：字符串，
要求：正确，
},
类型：{
类型：字符串，
要求：正确，
验证器（值）{
const valid=[“错误”、“警告”、“信息”]；
返回有效。包括（值）；
},
},
可解雇：{
类型：布尔型，
默认值：false，
},
超时：{
类型：数字，
默认值：0，
},
},
数据（）{
返回{
isVisible:false，
};
},
计算：{
伊瑟罗（）{
返回this.type=='error'；
},
isWarning（）{
返回this.type==“警告”；
},
isInfo（）{
返回this.type==='info'；
},
},
方法：{
清除（）{
常量事件=‘已清除’；
放手；
如果（this.isVisible）{
此.$once（'transitionend'，（）=>{
完成=正确；
此.$emit（事件，完成）；
});
this.isVisible=false；
}否则{
完成=错误；
此.$emit（事件，完成）；
}
},
解雇{
const事件=‘已解除’；
放手；
如果（此项可撤销）{
完成=正确；
此.$emit（事件，完成）；
这个.clear（）；
}否则{
完成=错误；
此.$emit（事件，完成）；
}
},
show（）{
如果（！this.isVisible）{
this.isVisible=true；
此.$emit（'show'，this.clear）；
if（此.timeout）{
设置超时（（）=>{
这是.$emit（'timeout'）；
这个.clear（）；
}，这是超时）；
}
}
},
过渡（事件）{
此.$emit（'transitionend'，事件）；
},
},
安装的（）{
window.requestAnimationFrame（this.show）；
},
};
施工通知中心={
名称：“通知中心”，
组成部分：{
通知栏，
},
模板：`
`,
道具：{
队列：{
类型：数组，
要求：正确，
},
},
数据（）{
返回{
活动：[]，
};
},
计算：{
hasActiveNotification（）{
返回this.active.length>0；
},
hasQueuedNotification（）{
返回this.queue.length>0；
},
},
观察：{
队列（）{
if（this.hasQueuedNotification&！this.hasActiveNotification）{
this.setNextActive（）；
}
},
},
方法：{
setNextActive（）{
this.setActive（this.queue.shift（））；
},
设置活动（通知）{
此.active.push（通知）；
},
removeActive（）{
this.active.pop（）；
},
清除（）{
this.active.pop（）；
if（this.hasQueuedNotification）{
this.$nextTick（this.setNextActive）；
}
},
},
};
window.vm=新的Vue({
组成部分：{
通知中心，
},
el:“#应用程序”，
模板：`
类型

错误

警告

信息

消息
可解雇
超时
生成通知
`,
数据：{
通知：[]，
类型：null，
消息：空，
可撤销：空，
超时：空，
},
方法：{
生成化（）{
常数{
类型，
消息
可解雇，
超时，
}=这个；
这个是.notifications.push({
类型，
消息
可解雇，
超时，
});
this.type=this.message=this.dismissable=this.timeout=null；
},
},
});
。通知栏{
框大小：边框框；
位置：绝对位置；
顶部：-3.2rem；
右：0；
左：0；
z指数：9999；
宽度：100%；
高度：3.2rem；
颜色：#fff；
字体系列：“Avenir Next”，无衬线；
字体大小：1.2米；
线高：3.2rem；
文本对齐：居中；
过渡：顶部266毫秒；
}
.通知栏--错误{
背景色：#f02a4d；
}
.通知栏--警告{
背景色：#ffc107；
}
.通知栏--信息{
背景色：#2196f3；
}
.通知栏--可见{
排名：0；
}
标签{
显示：块；
保证金：2rem 0；
字体大小：1.4rem；
}
标签：第一种类型{
边缘顶部：5雷姆；
}

html{
字体大小：62.5%；
}
身体{
字体系列：无衬线；
}
问题在于此行：

this.type = this.message = this.dismissable = this.timeout = null;

如果你移除这个，它就可以正常工作。当这个被执行时，props变为NULL，并且您已经验证了props不应该为NULL


const NotificationBar={
名称：'通知栏'，
模板：`
{{message}}
`,
道具：{
信息：{
类型：字符串，
要求：正确，
},
类型：{
类型：字符串，
要求：正确，
验证器（值）{
const valid=[“错误”、“警告”、“信息”]；
返回有效。包括（值）；
},
},
可解雇：{
类型：布尔型，
默认值：false，
},
超时：{
类型：数字，
默认值：0，
},
},
数据（）{
返回{
isVisible:false，
};
},
计算：{
伊瑟罗（）{
返回this.type=='error'；
},
isWarning（）{
返回this.type==“警告”；
},
isInfo（）{
返回this.type==='info'；
},
},
方法：{
清除（）{
常量事件=‘已清除’；
放手；
如果（this.isVisible）{
此.$once（'transitionend'，（）=>{
完成=正确；
此.$emit（事件，完成）；
});
this.isVisible=false；
}否则{
完成=错误；
此.$emit（事件，完成）；
}
},
解雇{
const事件=‘已解除’；
放手；
如果（此项可撤销）{
完成=正确；
此.$emit（事件，完成）；
这个.clear（）；