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. sscanf()的用法

    头文件 #include 定义函数 int sscanf (const char *str,const char * format,........); 函数说明             sscanf ...

  2. start-stop-daemon

    start-stop-daemon是OpenRC计划的一部分,这个程序最先出现在Debian系的Linux发行版中,这里有个比较古老的手册页面,更详细更直观的办法当然是通过man start-stop ...

  3. hadoop_百科

    一.发音是:[hædu:p]. 二.简介:Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储 ...

  4. go生成xml

    package main import ( "encoding/xml" "fmt" // "os" ) type Servers stru ...

  5. Android开发:《Gradle Recipes for Android》阅读笔记1.5

    这节讲的是如何如何添加JAVA依赖库. 默认的android项目有两个build.gradle文件,分别位于顶级目录,和应用自己的目录下(通常放在一个叫app的目录下面). gradle支持多种方式列 ...

  6. 【转】.Net 程序集 签名工具sn.exe 密钥对SNK文件 最基本的用法

    阐述签名工具这个概念之前,我先说说它不是什么: 1.它不是用于给程序集加密的工具,它与阻止Reflector或ILSpy对程序集进行反编译一毛钱关系都没有. 2.它很讨厌人们把它和加密联系在一起. 我 ...

  7. RocketMq的安装使用

    RocketMq的安装使用 .一.预备环境 1.系统 Windows 2. 环境 JDK1.8.Maven.Git 1.下载 1.1地址:http://rocketmq.apache.org/rele ...

  8. 巨蟒python全栈开发django8:基于对象和基于双下划线的多表查询

    1.编辑删除&&多对多关系的其他方法 提交,数据,得到结果 查看运行 给编辑和删除,添加样式 我们点击删除,可以成功删除 打印sql语句的,在settings.py里边的配置 LOGG ...

  9. Hystrix 基于注解开发

    不对地方,请指出!相互学习! 背景:Hystrix 没有无参构造函数,所以Spring管理bean时候没办法进行管理, 每个类都进行编码 个人感觉不方便,基于注解开发!方便速度快,不侵入代码!引入的j ...

  10. 修改 /var/lib/locales/supported.d/local 文件(使用 locale -a 命令查看系统中所有已配置的 locale)

    转自:http://zyxhome.org/wp/cc-prog-lang/c-stdlib-setlocale-usage-note/ http://www.west263.com/info/htm ...