Vue中提示框慢慢显示和慢慢消失方法

longfei815

已于 2022-09-24 21:56:15 修改

阅读量2.2k

点赞数 1

分类专栏：前端基础知识 vue 文章标签： vue.js 前端 javascript

于 2022-09-24 21:48:59 首次发布

本文链接：https://blog.csdn.net/jolinoy/article/details/127031487

版权

前端基础知识同时被 2 个专栏收录

75 篇文章 2 订阅

订阅专栏

vue

43 篇文章 3 订阅

订阅专栏

本文介绍了如何在Vue中利用transition标签和CSS样式实现组件的渐显渐隐过渡效果。通过设置fadeIn和fadeOut类的透明度变化，并配合transition属性设定过渡时长，可以轻松创建出组件慢慢显示和消失的视觉效果。

摘要由CSDN通过智能技术生成

Vue中提示框慢慢显示和慢慢消失方法

Vue提供了一个标签属性transition，直接使用就可以了：

用transition标签把需要慢慢显示的组件包起来。

然后在目前组件下面的style属性里面添加下面的样式即可：

// 弹窗过渡显示效果
// 进场时候过渡的开始状态和离场的结束状态
.fade-enter,.fade-leave-to{
  opacity: 0;
}
// 指定过渡的属性和时间，同样是进场和离场的过渡时间
.fade-enter-active,.fade-leave-active{
  transition: opacity .8s;
}

// 进场时候过渡的结束状态和离场的开始状态
.fade-enter-to,.fade-leave{
  opacity: 1;
}

效果图：