Removing transition from background-color doesn't work-CodePudding

I have a script that adds a class "notransition" to the body on the page load (it removes it after set time). I want to remove background-color and color transition from every element, but it doesn't seem to work.

$(window).on("load", function(){
    $("body").addClass("notransition");
    setTimeout(function(){
        $("body").removeClass("notransition");
    }, 1000);
});

.notransition *{
  transition-property: background-color, color !important;
  transition-duration: 0s !important;
}

However, I can remove every transition with code like this:

.notransition *{
  transition: none !important;
}

Is it possible to apply it only to color and background-color properties?

CodePudding user response：

Try this code which may help you to fix your problem:

.notransition *{
    transition:background-color 0s, color 0s;
}

CodePudding user response：

If I understand your quest properly it should be reverse, e.g. setTransition instead of notransition if you want to flash text on page load:

$('document').ready(function() {
  $("body").addClass("setTransition");
  setTimeout(function(){
    $("body").removeClass("setTransition");
  }, 1000);
});

.setTransition {
  background-color: yellow;
  color: red;
  transition-property: background-color, color;
  transition-duration: 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="greeting">
Hi there!
</div>