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