Vue elementUI dialog 动画效果+应用场景

前言

因为element-ui dialog本身的动画效果基本就是没动画效果,所以需要另外设置(下面会讲到)

应用场景描述

一、场景一

1.在第一屏, 机器人图标左右摆放,absolute定位

2.左侧按钮, 弹框定位在左侧; 右侧按钮,弹框定位在右侧.

代码实现

::v-deep.el-dialog.robotEva{
   
  margin-right: 50px;   // 右侧弹框
}
::v-deep.el-dialog.robotWalle{
   
  margin-left: 50px;   // 左侧弹框
}

二、场景二

1.在滚动到下一屏, 机器人图标固定在底部fixed定位,页面滚动时位置不变.

2.dialog弹框,打开时添加动画,

• 点击左侧按钮,弹框从左侧缓慢移入,
• 点击右侧按钮,弹框从右侧缓慢移入

代码实现

1. 理论上有4个弹框, 上面的左+右,下面的左+右;
2. 通过监听事件window.addEventListener,监听到滚动到下一屏时; 设置dialogBottom为 true
3. 这里只要一个弹框展示,且class通过绑定的变量值添加样式,
4. 以下几个变量代表:

robotDialog: 控制弹框显示或隐藏; 值: true or false;