用户登录

显示还有隐藏通知提示信息的时候可以使用一种过渡效果。回到项目,打开 app-notification 这个组件,这里可以使用 Vue 提供的 transition-group 这个组件,用它包装一下这个 AppNotificationMessage 。

然后在这个 transition-group 组件的上面,用 name 设置一个过渡的名字,比如 app-notification-message,下面可以在样式表里设计一下过渡样式。

样式

打开 app-notification-message 这个样式表,在这里添加一些过渡跟动画的样式,类的名字是 .app-notification-message 后面加上 enter-active,进入时的状态,用 transform 这个属性,它的值是 translateX 让元素往右移动 330 像素。

下面再用 transition 设置一下过渡,时长是 0.3s 。

然后再设计一下 app-notification-message-enter-to 这个类的样式,进入结束时的状态,这里用 transform 属性,把它的值设置成 translateX ,移动的距离是 0。

下面再设计一下元素离开时的过渡,设计一下 app-notification-message-leave-active 这个类的样式,用 transition 把过渡时长设置成 0.3s。

最后是 app-notification-message-leave-to,元素离开结束时的状态,transform,值是 translateX ,把元素往右移动 330 像素。

预览

回到浏览器测试一下,点一下这个按钮,现在显示通知提示信息的时候就会使用一种过渡效果,组件离开的时候也会使用一种过渡效果。

通知提示信息动画与过渡《 Vue.js 项目实践:消息提示 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点