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

在使用Element UI时，为满足UI需求，需要让notification居中显示。通过调整CSS，覆盖默认样式，实现通知居中。同时，虽然最终未采用，但还涉及了使用CSS3动画为notification添加上下滑动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用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%, -5