延迟200ms下在mask中 字体出现的比较快 有什么解决办法

要解决这个问题，可以使用 Vue.js 提供的 transition 动画组件。将 div 标签包装在 transition 组件内部，就可以使用 CSS 过渡效果控制文本内容和图片的出现方式。

首先，在模板中引入 transition 组件：

html复制代码

<transition name="fade"> 
<div class="nothing" v-if="result.length == 0">
 <img src="@public/img/interest/nothing.png" alt=""> 
<span class="nothing_text">暂时还没有通知</span>
 </div> 
</transition>

然后，使用 CSS 定义下面这个 fade 过渡类：

css复制代码

.fade-enter-active, .fade-leave-active { 

transition: opacity 0.5s; 
} 



.fade-enter, .fade-leave-to { 

opacity: 0; 
}

这段代码定义了一个名为 fade 的过渡类，它控制了元素出现和消失的动画效果。具体来说，当元素进入视图（enter）或离开视图（leave）时，会使用 0.5 秒的时间来执行渐变动画。

最后，还需要在 Vue 组件的 setup() 函数中删除延迟逻辑并将 result 变量置于合适的状态，以触发过渡效果的出现和消失。

javascript复制代码

export default { 
setup() { 
const result = ref([]) 
return {
 result
 } 
}
 }

这里假设 result 变量是一个响应式变量，它将根据业务逻辑的变化而动态更新。当 result.length == 0 时，该组件就会显示出来，并且使用 fade 过渡类来控制其动画效果。