搜索
chrome下,如果页面存在input元素,则使用了transition的元素会先闪动一下?
高洛峰
高洛峰 2016-11-07 16:02:19
[HTML讨论组]

页面html如下:

<!DOCTYPE html><html><head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="a.css">
    </head><body>
    <input type="text">
    <div></div>
    </body></html>

a.css文件如下:

div{    width: 500px;  
  height: 100px;   
   background: #f60;  
  -webkit-transition: 
  background linear .3s;  
    transition: background linear .3s;
  }
  div:hover{   
   background: #f00;}

如果css使用的是style加载在html里,则不会闪动,link的方式则会闪动。如果没有input元素,也不会闪动。


高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
三叔

如果有绝对定位元素,会有闪动后消失的情况,可以加backface-visibility: hidden;属性来规避这个问题

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号