前言
因为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弹框,打开时添加动画,
点击左侧按钮,弹框从左侧缓慢移入,点击右侧按钮,弹框从右侧缓慢移入
代码实现
理论上有4个弹框, 上面的左+右,下面的左+右;通过监听事件window.addEventListener,监听到滚动到下一屏时; 设置dialogBottom为 true这里只要一个弹框展示,且class通过绑定的变量值添加样式,以下几个变量代表:
robotDialog: 控制弹框显示或隐藏
; 值:
true or
false;
strEvaOrWalle: 判断弹框 左右
;值:
'robotEva' or
'robotWalle';
strTopOrBottom: 基于strEvaOrWalle的值来显示,这里是为了给dialog添加动画,值:
'robotRightIn' or
'robotLeftIn';
dialogBottom: 根据监听事件,值:
true or
false;为true时class为
'bottomD'
因为element-ui dialog本身的动画效果基本就是没动画效果
// 添加dialog的css样式
.bottomD .robotDialog
{
transition-duration: .8s
;
}
.bottomD .dialog-fade-enter-active
{
animation: none
!important
;
}
.bottomD .dialog-fade-leave-active
{
transition-duration: .55s
!important
;
animation: none
!important
;
}
// 结合我们的需求
.dialog-fade-enter-active .el-dialog.robotRightIn
{
animation: anim-open .8s linear
!important
;
}
.dialog-fade-leave-active .el-dialog.robotRightIn
{
animation: anim-close .6s linear
!important
;
}
// 弹框从右侧缓慢移入
@keyframes anim-open
{
0%
{
transform: translate3d
(100%, 0, 0
);
opacity: 0
;
}
25%
{
transform: translate3d
(60%, 0, 0
);
opacity: .5
;
}
50%
{
transform: translate3d
(15%, 0, 0
);
opacity: .9
;
}
75%
{
transform: translate3d
(5%, 0, 0
);
opacity: .95
;
}
100%
{
transform: translate3d
(0, 0, 0
);
opacity: 1
;
}
}
@keyframes anim-close
{
0%
{
transform: translate3d
(0, 0, 0
);
opacity: 1
;
}
100%
{
transform: translate3d
(100%, 0, 0
);
opacity: 0
;
}
}
.dialog-fade-enter-active .el-dialog.robotLeftIn
{
margin-left: 50px
!important
;
animation: anim-open-left .6s
!important
;
}
.dialog-fade-leave-active .el-dialog.robotLeftIn
{
animation: anim-close-left .6s
!important
;
}
// 弹框从左侧缓慢移入
@keyframes anim-open-left
{
0%
{
transform: translate3d
(-100%, 0, 0
);
opacity: 0
;
}
100%
{
transform: translate3d
(0, 0 , 0
);
opacity: 1
;
}
}
@keyframes anim-close-left
{
0%
{
transform: translate3d
(0, 0, 0
);
opacity: 1
;
}
100%
{
transform: translate3d
(-100%, 0, 0
);
opacity: 0
;
}
}
监听事件
window.addEventListener
('scroll', this.handleScroll, true
);
handleScroll: function
() {
let defaultH
= 544 +
$('.aiBox').height
() + 30
; // 计算高度
let scrollTop
= document.documentElement.scrollTop
;
if (scrollTop
> defaultH
) { // 判断滚动高度
> 元素高度
this.dialogBottom
= true;
} else {
this.dialogBottom
= false;
}
},
