>  Q&A  >  본문

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

阿神阿神2765일 전958

모든 응답(2)나는 대답할 것이다

  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:04:39

    研究半天,终于在网上找到了一个可行的解决办法
    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");
    });
    

    已经发现在如下情况下会出现问题:

    1. button 处在一个 form 中,并且 form 里至少有一个 input[type=password]
    2. 设置 button 样式的 css 代码是通过 link 元素外链进来的,若是通过 style 元素直接把 css 代码写到页面内,问题消失
    3. 如果 css 代码前有一大段外链的 javascript 代码(例如一个 jquery.js),且没有被缓存,也有可能使问题消失

    最小化的会出问题的代码:
    index.html

    <!doctype html>
    <link rel="stylesheet" href="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 吧

    회신하다
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:04:39

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

    我不懂compass,估计也拿不到compass的原文件,就从最终的css文件入手看了

    transision有关属性,只打在:hover伪类上,而不是打在元素的整个类上。

    https://gist.github.com/shamiao/7747795 我对style.css的修改。(有注释的部分就是改动)

    회신하다
    0
  • 취소회신하다