Ag-grid控件使用pinned:left后,配合iview下拉框,会出现闪烁

引起原因:下拉图标的反转动画

目前解决方案:

添加一个全局样式:

禁用动画,其他地方也是如此,

影响控件有:gz-tree-select:

使用:直接外部添加样式:disable-transition

效果:【牺牲了动画体验】

后续:

发现事情没这么简单,动画禁掉这种做法有点low!如果要保留动画效果呢?

如果下面的表格带滚动条,滚动条也会闪烁,

分析:根本原因是

动画元素:

transition: al .2s ease-in-out;

transform: rotate(90deg);

然后和动画同一级的元素,position:relative:

知道了这个原因,就谷歌,谷歌,谷歌

在翻阅了无数个站点后,最终发现了一个介绍:

https://stackoverflow.com/questions/35461007/why-does-position-relative-interfere-with-transform-scale

和我一样是relative,然后他多了个z-index,纳尼?试试呗,

问题效果:可以发现滚动条闪烁,

第一次尝试:

设置动画的标签z-index为-1,没什么效果,好吧,

跟着这个关键字z-index,继续下去,拿如果我把下面的z-index设置>1呢?

暴力的我直接设置为1000

耶!成功了

滚动条不再闪烁,试试其他的?发现问题哪有这么简单啊!!!真是图样图森破

下拉框被遮挡咯!好吧,看来设置的1000大于下拉框的值了,看看下拉框的值是多少

900,好的,收到,我不能大于他,不然就会被覆盖,设置899试试?

看看下效果:

代码优化:

找到解决方案后,开始优化,因为我的界面自己写的上中下布局控件,我直接在布局控件中添加一个z-index标签呢?

这样无需修改每个页面,经过测试,一些正常

现在可以删除

disable-transition这个样式了,

查找资料:http://imweb.io/topic/5a23e1f1a192c3b460fce26e

Ag-grid控件使用pine:left后,配合iview下拉框,会出现闪烁的更多相关文章

  1. 转:zTree树控件实战篇:针对多个下拉加载zTree树应该如何做出合理的配置

    今天有一个zTree的朋友遇到一个非常棘手的问题,才研究zTree树控件两天就被上头催着看成果,很是苦恼.他面对的问题就是页面内多个地方需要下拉在其文本框下方加载zTree树,由于对zTree下拉加载 ...

  2. Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  3. SageCRM 页面加载完后,用下拉框联动修改放大镜字段的取值范围

    原理很简单就是修改放大镜属性中的sql. 函数如下:第一个参数是字段的名称.第二个参数是需要控制这个放大镜的sql.可以跟进下拉框的值来组织这个sql. /*--------------- For C ...

  4. js中遍历出查询后的listmodel(下拉框系列)

    function selectclassname(){ $.ajax({ url:"queryschoolclasslists.action", async:false, data ...

  5. Grid控件

    Grid控件是WPF布局容器中功能最强大.最灵活的控件.Grid控件基本上能够完成其他WPF容器控件所能完成的功能,Microsoft建议大多数界面的布局都使用Grid控件来实现,因此默认情况下.vs ...

  6. WPF平台Grid控件性能比较

    WPF官方发布第一个版本至今已经有10年了, 我们几乎在同时也开始了XAML开发.即使经过多年打造,我们依旧尝试提高:我们真的成功打造了高效灵活的控件吗?我没有在其他地方找到任何关于优秀的WPF表格性 ...

  7. 扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip

    原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip infragistics是全球领先的UI工具和用户体验的专家,Infragistics开发了一系列的 ...

  8. wpf研究之道-grid控件

    想要说些什么,却不知道从哪开始."形而上谓之道,形而下谓之器".与其坐而论道,不如脚踏实地,从最实用的地方开始. 我们先来看看wpf中的grid控件.grid控件是个网格的布局控件 ...

  9. 完全使用一组 DSL 来操作 Grid 控件

    最近尝试了一下将 XtraGrid 的初始化工作封装成内部 DSL,例如一个普通的基础数据的增删改查操作的代码会像下面这样: public partial class UserForm : XtraF ...

随机推荐

  1. Yarn源码分析之事件异步分发器AsyncDispatcher

    AsyncDispatcher是Yarn中事件异步分发器,它是ResourceManager中的一个基于阻塞队列的分发或者调度事件的组件,其在一个特定的单线程中分派事件,交给AsyncDispatch ...

  2. mysql 索引优化,索引建立原则和不走索引的原因

    第一:选择唯一性索引 唯一性索引的值是唯一的,可以更快捷的通过该索引来确定某条记录. 2.索引的列为where 后面经常作为条件的字段建立索引 如果某个字段经常作为查询条件,而且又有较少的重复列或者是 ...

  3. 问题解决 —— Http Status 500

    在完成JavaWeb项目的过程中经常会出现这种错误 500:指的是服务器内部错误 通常遇到这种情况,我会去看控制台的信息,那里肯定会有提示,空指针(值没有传过去),或者java.sql.SQLExce ...

  4. 一些常用的html css整理--文本长度截取

    div+css设置列表div超出部分显示...(单行文本) width:200px; //指定宽度: overflow:hidden; //将超出内容隐藏 text-overflow:ellipsis ...

  5. Redis 在windows中启动

    redis-server.exe redis.windows.conf 或 redis-server.exe redis.conf

  6. iphone断点下载,断点续传

    本文转载至 http://blog.csdn.net/zaitianaoxiang/article/details/6650469 - (void)loadView { NSURLConnection ...

  7. android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图

    1.准备工作: 百度地图API是免费开放的,但是需要申请API Key: 1)先注册一个百度开发者帐号 2)进入百度开放服务平台http://developer.baidu.com/ 3)进入LBS云 ...

  8. Xamarin.Forms学习之Page Navigation(一)

    在最初接触Xamarin.Forms的时候,我是跟着Xamarin官方的名为“learning-xamarin-ebook”的pdf文档进行学习的,我在成功运行Hello world程序之后,我开始跟 ...

  9. eclipse content assist 出现错误

    解决方法是,在Window->preference->java->editor>Content Assist->advanced ,将 time out 由50 ms 改 ...

  10. 新手之使用git

    本篇博客针对不会Git的小童鞋,大神们可以绕过,错误之处谢谢指正: 关于GitHub的强大此处不在说明,知道GitHub也有一段时间了,但是一直苦于不会使用. 本篇文章介绍的是如何将工程代码托管到上面 ...