CSS 不透明度过渡立即切换为零

Question

我无法弄清楚为什么同一元素上的复合过渡（不透明度和高度）没有遵循预期的持续时间。然而，这个问题只发生在第一次运行，然后开始完美运行。

更新：

我找到了一个更简单的方法来演示这个问题。

点击"start"按钮，右边的框立即变透明，不会像左边那样慢慢变淡

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

遗留内容（不再相关）：

这里只是描述上下文的片段：

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

为了更好地阐明实际行为和预期行为，请查看此笔：https://codepen.io/highfield/pen/dKLKKo

一旦运行，按下 "hide" 按钮，"Items" 块立即消失，但预期的行为是沿着一定的时间间隔淡出。在这个初始的怪异阶段之后，"show" 和 "hide" 函数的行为完全符合预期。

我还注意到，通过从 "transition-property" CSS 字段中删除 "height"，不透明度会正确淡化。

如何解决这个问题？

Answer 1

在执行任何过渡之前，必须在目标元素上设置过渡属性。为了使初始动画也能正常工作，您应该为 CSS.

中的 #s1 元素设置一个基本的过渡定义。

Answer 2

终于找到问题所在了

似乎字段的顺序很重要，但我不明白为什么本机版本可以正常工作，即使是随机顺序。通过如下更改 jQuery 版本，转换行为正确：

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

CSS 不透明度过渡立即切换为零

CSS opacity transition switch to zero immediately

html

javascript

jquery

opacity

css-transitions