Question

我有一个div设计为在悬停时在背景颜色上有平滑过渡。此div显示在许多页面（包括主页）中，但在主页中它具有不同的背景颜色。

div {
    border:1px solid;
    background-color:#fff;
    display:inline-block;
    width:100%;
    height:100px;
    -webkit-transition: 0.5s;
    -moz-transition:    0.5s;
    -o-transition:      0.5s;
    transition:         0.5s;
}

div.homepage {
    background-color:#777;
}

div:hover, div.homepage:hover {
    background-color:#f00;
}

由于这个div包含在每个页面上的PHP代码段中，因此（保持代码清洁）的想法是使用PHP输出通用div，然后通过jQuery在主页上添加“主页”类。

$('div').addClass("homepage");

不幸的是，这会导致页面加载出现意外转换（请参阅fiddle，为了清楚起见，请在加载后点击“运行”）。如何仅在页面加载时禁用CSS转换，而不影响正常行为（当div被悬停时）？

Answer 1

这对我有用： http://css-tricks.com/transitions-only-after-page-load/

基本上，您可以在body标签中添加一个类：

<body class="preload">

禁用转换：

.preload * {
 -webkit-transition: none !important;
 -moz-transition: none !important;
 -ms-transition: none !important;
 -o-transition: none !important;
}

然后，一旦页面加载，您将删除该类：

$(window).load(function() {
  $("body").removeClass("preload");
});

Simples！：d

Answer 2

仅在页面加载时禁用过渡：

<body class="js-stop-transition">
...
<script>document.body.classList.remove('js-stop-transition')</script>
</body>

并添加到CSS：

body.js-stop-transition * { transition:none !important; }

Answer 3

当您将班级homepage动态添加到div时，会强制进行转换。

如果div加载class，则加载中没有任何转换。

在你的HTML中：

<div class="homepage"></div>

在将类发送到客户端之前，先在PHP中添加该类。

Answer 4

如果你只是设置div的初始灰色而不是白色，那会不会好的？像这样：

div {
    border:1px solid;
    background-color:#777;
    display:inline-block;
    width:100%;
    height:100px;
   -webkit-transition: 0.5s;
   -moz-transition:    0.5s;
   -o-transition:      0.5s;
    transition:         0.5s;   
}

请在此处查看更新的小提琴：fiddle

Answer 5

最初只写下列属性

       div {
     border:1px solid;
     background-color:#fff;
     display:inline-block;
     width:100%;
     height:100px;
 }

 div.homepage {
     background-color:#777;
 }

 div:hover, div.homepage:hover {
     background-color:#f00;
 }

添加主页类后，添加此类

之类的剩余属性

      var transProperty=$('<style>div {  -webkit-transition: 0.5s;   -moz-transition: 0.5s;   -o-transition:  0.5s;     transition:  0.5s; }</style>');
      $('head').append(transProperty);

仅在页面加载时禁用CSS转换

5 个答案: