css3 - Typecho 后臺部分表單按鈕在 Chrome 下出現(xiàn)靈異動畫問題，求解決
問題描述
我給按鈕添加了 compass 的 transition-duration(.4s) 的動畫，用于控制按鈕背景色。但是加了以后 登錄頁面 和【控制臺-個人設(shè)置】頁面的按鈕卻出現(xiàn)了從小變大的效果，但是在【設(shè)置-（下面所有頁面）】下所有的按鈕都沒有出現(xiàn)大小變化的情況。
于是我又加了句 transition-property(background-color)，按鈕的形狀沒有變化了，但是出現(xiàn)了從無到有的漸變過程，這個就不明白了，js 全禁用了也是這樣，查了半天也沒查出原因。
safari 和 firefox 下都顯示正常，只有在 hover 過程才出現(xiàn)背景色漸變的動畫。但是在 Chrome 瀏覽器里出現(xiàn)了形狀變化或展示之初變化（我的版本 31.0.1650.57），不知道是什么問題，應(yīng)該如何解決？
演示后臺 http://typecho.org/admin/login.php
問題解答
回答1：研究半天，終于在網(wǎng)上找到了一個可行的解決辦法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');});
已經(jīng)發(fā)現(xiàn)在如下情況下會出現(xiàn)問題：
button 處在一個 form 中，并且 form 里至少有一個 input[type=password]設(shè)置 button 樣式的 css 代碼是通過 link 元素外鏈進(jìn)來的，若是通過 style 元素直接把 css 代碼寫到頁面內(nèi)，問題消失如果 css 代碼前有一大段外鏈的 javascript 代碼（例如一個 jquery.js），且沒有被緩存，也有可能使問題消失最小化的會出問題的代碼：index.html
<!doctype html><link rel='stylesheet' href='http://www.intensediesel.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. 這個應(yīng)該算是 Chrome 的 bug 吧
回答2：-- I’LL BE BACK 答錯了無所謂，我還會回來的 --
我不懂compass，估計(jì)也拿不到compass的原文件，就從最終的css文件入手看了
把transision有關(guān)屬性，只打在:hover偽類上，而不是打在元素的整個類上。
https://gist.github.com/shamiao/7747795 我對style.css的修改。（有注釋的部分就是改動）
相關(guān)文章：
1. javascript - 移動端開發(fā) H5 頁面在 iOS手機(jī)上無法實(shí)現(xiàn) 長按復(fù)制文本 求解決2. javascript - 微信網(wǎng)頁開發(fā)從菜單進(jìn)入頁面后，按返回鍵沒有關(guān)閉瀏覽器而是刷新當(dāng)前頁面，求解決？3. 微信開放平臺 - android 微信支付后點(diǎn)完成按鈕，后回調(diào)打開第三方頁面，屏幕閃動，求解決方法4. css - 盒模型布局，隱藏內(nèi)部元素，外圍高度居然沒有改變？求解決辦法5. java - 讀文件時控制臺報(bào)如下錯誤，求解決！！！6. javascript - vue報(bào)錯，昨天也是這么寫的也沒報(bào)錯呀，今天就報(bào)錯了，不知原因。求解決7. docker鏡像無法刪除，請求解決辦法。8. node.js - webpack打包報(bào)錯，求原因？求解決？9. javascript - 手機(jī)點(diǎn)擊input時，button會被頂上去？求解決！！！10. 求解決方法:Parse error: syntax error, unexpected
網(wǎng)公網(wǎng)安備