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)安備