修改饿了么ui里面notification出现的位置和运动轨迹

1,737 阅读1分钟

查看原文

在用element UI做开发的过程中,我们的UI要求notification在屏幕上居中显示。我们都知道,element只提供了左上,左下,右上,右下四个位置,可没有提供居中显示。

怎么办,首先想到的就是调调css了,因为这个成本最低,要是其它的,可能还需要去看源码。

1.第一步,先找影响notification显示的css。

将durution设置为0,如下:

this.$notify({
     title: '提示',
     message: '有错误',
     type: 'warning',
     duration:0
 })

接下来打开chrome浏览器,选中提示框,我们发现在不同的位置它有三个类名:el-notification right left

2.利用css的优先原则,将源码里的css样式全部覆盖掉,因为我这边要求的是全局都覆盖掉,所以我就用了一劳永逸的方法,全部覆盖了。

.el-notification{
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.el-notification.right{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.el-notification.left{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

3.添加动画效果

这一步是我们本来以为需要,后来UI说不需要,我就去掉了,不过既然写了,发上来也无妨。利用css3的animation,给notification添加动画。下面只写一个从上到下的。

.el-notification.left{
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    animation: notify 0.5s linear 1;
}
@keyframes notify {
  from {
    top: calc(50% - 300px);
  }
  to {
    top: 50% ;
  }
}