driver.js 动画效果显示 highlight 区域

来源：5-49 方案落地：Guide 业务逻辑处理

飞镰一夜叉

2023-01-11

driver.js 动画效果开启下，highlight 会遮蔽图标的问题

问题截图：
driver = new Driver({
// （原作者关闭动画反倒加了不少的样式）
animate: true,
// 禁止点击蒙版关闭
allowClose: false,
closeBtnText: i18n.t(‘msg.guide.close’),
nextBtnText: i18n.t(‘msg.guide.next’),
prevBtnText: i18n.t(‘msg.guide.prev’)
})

图片描述

解决：
添加样式
#driver-highlighted-element-stage {
background: transparent!important;
outline: 5000px solid rgba(0,0,0,.75);
}

#driver-page-overlay {
background: none !important;
}

就这样。。。

写回答

1回答

Sunday

2023-01-12

你好

把背景颜色变为透明，这是一个很好的方案。该问答已经在小节内置顶

OrcXiao

driver.js组件高亮时遮蔽图标的问题是因为 .fixed-header 类使用了 position：fixed 自从Chrome 22 之后，position为fixed的元素会创建一个新的层叠上下文（stacking context），而子元素的 z-index 值，只在父级层叠上下文中才中有意义。其他浏览器并没有这个问题 driver.js组件实现高亮的原理是利用z-index 给目标dom添加z-index: 100004 弹窗层的z-index: 100003。从而高亮目标dom。目标dom的父元素设置position为fixed之后 z-index便遵从从父原则导致高亮失败。所以我的解决方案是修改 layout/index 文件如下 .fixed-header { ... position: absolute; width: 100%; }

2023-02-02

共1条回复

基于Vue3新标准，打造后台综合解决方案

基于Vue3重写Vue-element-admin,打造后台前端综合解决方案

1941 学习 · 1687 问题

查看课程

相似问题

动画中有重影

回答 1

老师，动画处理后，最后一个，会有 / 一闪而过，如何处理不让它出现？

回答 2

高亮的那块区域是空白的这是为什么？

回答 1

老师，不是很理解拉伸动画这里，为什么要用vuex。

回答 2

Svg图片不显示

回答 1

打开慕课网App查看更多内容