仅在页面加载上禁用CSS过渡

我有一个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悬停时）？

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

本质上，您在身体标签中添加了一个类：

<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");
});

类似！：D

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

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

并添加到CSS：

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

如果您只是为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;   
}

请参阅此处的更新小提琴：小提琴

当您动态地将homepage添加到div。

如果div加载了class，则负载中没有任何过渡。

在您的html中：

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

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

我的窗口负载太快了，所以只能对我有用：

CSS

body {
  --transition: 0s; 
}
div {
  /* ... */
  transition: var(--transition); 
}

window.addEventListener("DOMContentLoaded", () => {
  document.body.style.setProperty("--transition", "2s");
});

在这种情况下，如果您有许多不同的过渡，可能会变得困难

最初仅写下以下属性

       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);

相关内容

最新更新

热门标签：