css3 - Typecho 后台部分表单按钮在 Chrome 下出现灵异动画问题，求解决

Question

我给按钮添加了 compass 的 transition-duration(.4s) 的动画，用于控制按钮背景色。 但是加了以后 登录页面 和【控制台-个人设置】页面的按钮却出现了从小变大的效果，但是在【设置-（下面所有页面）】下所有的...

伊谢尔伦 · Answer

After researching for a long time, I finally found a feasible solution online
http://css-tricks.com/transitions-only-after-page-load/

Solution steps (modify or add code in the specified file):

admin/header.php

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");
});

It has been found that problems may occur in the following situations:

The button is in a form, and the form has at least one input[type=password]
The css code for setting the button style comes in through the link element. If the css code is directly written into the page through the style element, the problem disappears
If there is a large section of external javascript code (such as a jquery.js) before the css code and it is not cached, it is possibleto make the problem disappear

Minimized problematic code:
index.html

index.css

button {
  background-color: blue;
  -webkit-transition: background-color 0.5s;
}
button:hover {
  background-color: orange;
}

P.S. This should be considered a Chrome bug

伊谢尔伦 · Answer

-- I'LL BE BACK 答错了无所谓，我还会回来的 --

I don’t understand compass, and I probably can’t get the original file of compass, so I started with the final css file

Put the transision related attributes only on the :hover pseudo-class, rather than on the entire class of the element.

https://gist.github.com/shamiao/7747795 My modifications to style.css. (The parts with comments are changes)