CSS opacity transition switch to zero immediately

Question

I cannot figure out why a composite transition (opacity and height) on the same element does not follow the expected duration. However, this issue happens only the very first time is run, then begins to work perfectly.

UPDATE:

I found a slimmer way to demonstrate the problem.

By click the "start" button, the box at the right turns immediately transparent, and does not fade slowly as the left one.

$("button").on("click", function() {
  doNative();
  doJQuery();
});

function doNative() {
  const elem = document.getElementById("bn");
  elem.style.opacity = 0;
  elem.style.height = 0;
  elem.style.transitionDuration = "2s";
  elem.style.transitionProperty = "opacity, height";
}

function doJQuery() {
  const elem = $("#bj");
  elem.css({
    opacity: 0,
    height: 0,
    "transition-duration": "2s",
    "transition-property": "opacity, height",
  });
}

.block {
  width: 200px;
  font-size: 24px;
  font-family: Tahoma;
  display: inline-block;
  margin: 10px;
  border: 1px solid gray;
}

.initial {
  opacity: 1;
  height: 200px;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div>
  <button>start</button>
</div>

<div>
  <div class="block">
    <div id="bn" class="initial">This box is collapsed using the native transition API</div>
  </div>
  <div class="block">
    <div id="bj" class="initial">This box is collapsed using the jQuery transition API</div>
  </div>
</div>

LEGACY CONTENT (no relevant anymore):

Here is just a snippet to depict the context:

items.css({
  opacity: 0,
  height: 0,
  "transition-duration": transitionDuration + "ms",
  "transition-property": "opacity, height"
});

To better clarify the actual and the expected behavior, have a look at this pen: https://codepen.io/highfield/pen/dKLKKo

Once run, by pressing the "hide" button, the "Items" block disappears immediately, but the expected behavior is to fade along a certain interval. After this initial weird phase, the "show" and "hide" functions behave perfectly as expected.

I also noticed that by removing the "height" from the "transition-property" CSS field, the opacity will fade correctly.

How to patch this problem?

Answer 1

Finally, I've found where the problem is.

It seems that the order of the fields matters, but I don't understand why the native version works fine, even in a random order. By changing the jQuery version as follows, the transitions behave correctly:

function doJQuery() {
  const elem = $("#bj");
  elem.css({
    "transition-duration": "2s",
    "transition-property": "opacity, height",
    opacity: 0,
    height: 0,
  });
}