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

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;
}

效果图:

猜你喜欢

转载自blog.csdn.net/jolinoy/article/details/127031487