css不透明度转换立即切换到零

$("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>