CODEWITHSUNDEEP
jquerycss-transitions
Giorgio
Giorgio

Reputation: 1970

Disable CSS transitions on page load only

I have a div styled to have smooth transitions on background-color when hovered. This div is displayed in many pages (including homepage) but in homepage it has a different background-color. 

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

Since this div is included with a PHP snippet on each page, the idea (to keep code clean) is to output a generic div with PHP and then add a "homepage" class on homepage only, via jQuery. 

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

Unfortunately, this causes an undesired transition on page load (see fiddle, for sake of clarity click "Run" after loading). How can I disable CSS transitions on page load only, without affecting normal behaviour (when div is hovered)?

Upvotes: 11

Views: 21135

Answers (6)

Mero
Mero

Reputation: 763

My window load too fast, so only this works for me:

CSS

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

JS

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

In this case if you have many different transitions it could be a get difficult

Upvotes: 0

Dmitry Shashurov
Dmitry Shashurov

Reputation: 1734

Disable transitions on page load only:

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

And add to CSS:

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

Upvotes: 1

Craig Poole
Craig Poole

Reputation: 750

This is what worked for me: http://css-tricks.com/transitions-only-after-page-load/

Essentially, you add a class to the body tag:

<body class="preload">

Which disables the transitions:

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

Then once the page has loaded you remove the class:

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

Simples! :D

Upvotes: 19

francadaval
francadaval

Reputation: 2481

The transition is forced when you dynamically add the class homepage to the div.

If the div is loaded with the class there is not any transition in load.

In your html:

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

Add the class in PHP before send it to client side.

Upvotes: 0

durgesh.patle
durgesh.patle

Reputation: 720

Initially write only following properties

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

after adding your homepage class, append remaining properties like this

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

Upvotes: -3

Bobby5193
Bobby5193

Reputation: 1625

Would'n it be ok if you simply set the initial gray color for the div instead of white ? Like this :

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

See updated fiddle here : fiddle

Upvotes: 0

Related Questions