css3 - Typecho 后台部分表单按钮在 Chrome 下出现灵异动画问题，求解决
问题描述
我给按钮添加了 compass 的 transition-duration(.4s) 的动画，用于控制按钮背景色。但是加了以后 登录页面 和【控制台-个人设置】页面的按钮却出现了从小变大的效果，但是在【设置-（下面所有页面）】下所有的按钮都没有出现大小变化的情况。
于是我又加了句 transition-property(background-color)，按钮的形状没有变化了，但是出现了从无到有的渐变过程，这个就不明白了，js 全禁用了也是这样，查了半天也没查出原因。
safari 和 firefox 下都显示正常，只有在 hover 过程才出现背景色渐变的动画。但是在 Chrome 浏览器里出现了形状变化或展示之初变化（我的版本 31.0.1650.57），不知道是什么问题，应该如何解决？
演示后台 http://typecho.org/admin/login.php
问题解答
回答1：研究半天，终于在网上找到了一个可行的解决办法http://css-tricks.com/transitions-only-after-page-load/
解决步骤(在指定文件里修改或添加代码)：
admin/header.php<body class='preload<?php if (isset($bodyClass)) {echo ’ ’.$bodyClass;} ?>'>admin/css/style.css
/*可以放在 body {} 下面*/.preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important;}admin/common-js.php
$(document).ready(function() { $('body').removeClass('preload');});
已经发现在如下情况下会出现问题：
button 处在一个 form 中，并且 form 里至少有一个 input[type=password]设置 button 样式的 css 代码是通过 link 元素外链进来的，若是通过 style 元素直接把 css 代码写到页面内，问题消失如果 css 代码前有一大段外链的 javascript 代码（例如一个 jquery.js），且没有被缓存，也有可能使问题消失最小化的会出问题的代码：index.html
<!doctype html><link rel='stylesheet' href='https://www.haobala.com/wenda/index.css'/><form> <input type='password'/> <button>登录</button></form>
index.css
button { background-color: blue; -webkit-transition: background-color 0.5s;}button:hover { background-color: orange;}
P.S. 这个应该算是 Chrome 的 bug 吧
回答2：-- I’LL BE BACK 答错了无所谓，我还会回来的 --
我不懂compass，估计也拿不到compass的原文件，就从最终的css文件入手看了
把transision有关属性，只打在:hover伪类上，而不是打在元素的整个类上。
https://gist.github.com/shamiao/7747795 我对style.css的修改。（有注释的部分就是改动）
相关文章：
1. javascript - 手机点击input时，button会被顶上去？求解决！！！2. python相关问题求解决，有偿3. java - 创建maven项目失败了 求解决方法4. node.js - webpack打包报错，求原因？求解决？5. javascript - 移动端开发 H5 页面在 iOS手机上无法实现 长按复制文本 求解决6. java - 读文件时控制台报如下错误，求解决！！！7. javascript - 微信网页开发从菜单进入页面后，按返回键没有关闭浏览器而是刷新当前页面，求解决？8. python+jinja2编写前端界面，发生Unexpected end of template问题，求解决！9. 微信开放平台 - android 微信支付后点完成按钮，后回调打开第三方页面，屏幕闪动，求解决方法10. python - 一个Flask Web应用报了一个error: [Errno 10053]错，求解决。
网公网安备