vue插件动画优化：从stylebinding到scoped的深坑

@keyframesshow-toast{0%{opacity:0;}25%{opacity:1;z-index:9999}50%{不透明度:1;z-index:9999}75%{不透明度:1;z-index:9999}100%{不透明度:0;z-index:0}}.toast{位置：固定；顶部：50%；左：50%；转换：翻译（-50%，-50%）；z-指数：999；背景色：#000；不透明度：.7；颜色：#fff；框大小：边框框；最小高度：80px；填充：20px30px；行高：50px；最小宽度：364px；最大宽度：80%；边界半径：15px；字体大小：28px；文本对齐：居中；word-wrap:break-word;问题发现最近打算给团队里的公共插件做一些小动画效果，优化用户体验。这次先从最简单的toast插件说起。主要的文件有如下两个：index.jsimportToastfrom'./Toast.vue';const_TOAST={show:false,component:null};exportdefault{install(Vue){//添加实例方法Vue.prototype.$toast=(text,options={duration:2000})=>{if(_TOAST.show){return;}if(!_TOAST.component){让ToastComponent=Vue.extend(Toast);_TOAST.component=newToastComponent();让元素=_TOAST.component.$mount().$el;document.body.appendChild（元素）；}_TOAST.component.duration=options.duration||2000；_TOAST.component.whiteSpace=options.whiteSpace||'继承';_TOAST.component.position=options.position||'中心';_TOAST.component.text=文本；_TOAST.component.show=_TOAST.show=true;setTimeout(()=>{_TOAST.component.show=_TOAST.show=假e;},options.duration);};Vue.prototype.$killToast=()=>{if(_TOAST.component){_TOAST.component.show=_TOAST.show=false;}};}};Toast.vue@keyframesshow-toast{0%{opacity:0;}25%{opacity:1;z-index:9999}50%{不透明度:1;z-index:9999}75%{不透明度:1;z-index:9999}100%{不透明度:0;z-index:0}}.toast{位置：固定；顶部：50%；左：50%；转换：翻译（-50%，-50%）；z-指数：999；背景色：#000；不透明度：.7；颜色：#fff；框大小：边框框；最小高度：80px；填充：20px30px；行高：50px；最小宽度：364px；最大宽度：80%；边界半径：15px；字体大小：28px；文本对齐：居中；word-wrap:break-word;这都是最常见的插件写法，使用时importtoastformXXX导入index.js，还有Vue.use，直接在组件中使用this.$toast即可。再说动态效果。上面的Toast.vue代码中，默认在styleObject中写了一个动态效果show-toast，它的时长是根据时长计算的。上面代码的逻辑没有错，但是在实际运行中，看不到动态效果的效果。会不会是动画时间太快了？我用Chrome的Performance工具记录了整个toast出现时每一帧的渲染：可以看到，toast是直接出现的，并没有我们想要的过渡效果。那么，问题是什么？问题分析猜想一：transition和display冲突？因为v-show的本质是展示，参考周俊鹏《解决transition动画与display冲突的几种方法》，可能是因为浏览器的UI线程在处理UI操作的时候，在同一个tick中添加了多个css属性设置操作，所以造成了这样的情况：我们添加同时display=block的一个动画属性，这两个操作是同时执行的，所以我们得到了一个即时显示的效果。要验证这样的猜想其实很简单，只要将v-show改成v-if即可：{{text}}