要想清楚地理解这种情况，你需要了解 CSSOM 和 DOM 之间的关系。
在previous Q/A 中，我对重绘 过程的工作原理做了一些说明。
基本上，有三个步骤，DOM 操作、回流和绘制。
- 第一个（DOM操作）只是修改一个js对象，都是同步的。
- 第二个（reflow，又名 layout）是我们感兴趣的，而且有点复杂，因为只有一些 DOM 方法和绘制操作需要它.它包括更新所有 CSS 规则并重新计算页面上每个元素的所有计算样式。
作为一个相当复杂的操作，浏览器会尽可能少地尝试这样做。
- 第三次 (paint) 每秒最多只能完成 60 次（仅在需要时）。
CSS 转换通过从一种状态转换到另一种状态来工作。为此，他们会查看元素的最后计算值以创建初始状态。
由于浏览器仅在需要时才重新计算计算样式，因此在您的过渡开始时，您应用的任何 DOM 操作都还没有生效。
所以在您的第一个场景中，当计算转换的初始状态时，我们有
.b { computedStyle: {display: none} }
...就是这样。
因为，是的，这就是 display: none 对于 CSSOM 的强大之处；如果一个元素有display: none，那么它不需要被绘制，它不存在。
所以我什至不确定转换算法是否会启动，但即使它启动了，初始状态对于 任何 可转换值都是无效的，因为所有计算值都只是空值。
您的.a 元素从一开始就可见，不存在此问题，可以进行转换。
如果您能够使其延迟工作（由 $.animate 引起），那是因为在确实更改了 display 属性的 DOM manip' 和确实触发的延迟的 DOM manip' 执行之间过渡时，浏览器确实触发了 reflow（例如，因为屏幕垂直同步在两者之间启动，并且触发了 paint 操作）。
现在，这不是问题的一部分，但由于我们确实更好地了解发生了什么，我们也可以更好地控制它。
确实，some DOM methods 确实需要有最新的计算值。例如Element.getBoundingClientRect、element.offsetHeight 或getComputedStyle(element).height 等。所有这些都需要整个页面更新计算值，以便正确进行装箱（例如，元素可以有边距或多或少地推动它，等等）。
这意味着我们不必不知道浏览器何时会触发这个reflow，我们可以在需要的时候强制它去做。
但请记住，页面上的所有元素都需要更新，这不是一个小操作，如果浏览器宽容，这是有充分理由的。
所以最好偶尔使用它，每帧最多一次。
幸运的是，Web API 让我们能够在此绘制操作发生之前挂钩一些 js 代码：requestAnimationFrame。
所以最好的办法是在这个预绘制回调中只强制我们重排一次，并从这个回调中调用所有需要更新值的东西。
$('button').on('click',function(){
$('.b').show(); // apply display:block synchronously
requestAnimationFrame(() => { // wait just before the next paint
document.body.offsetHeight; // force a reflow
// trigger the transitions
$('.b').css('right','80%');
$('.a').css('right','80%');
});
})
body {
width:800px;
height:800px;
}
div {
width:50px;
height:50px;
background-color:#333;
position:absolute;
display:none;
right:5%;
top:0;
transition:right .5s cubic-bezier(0.645, 0.045, 0.355, 1);
color: white;
}
.a {
display:block;
top:60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'>A
</div>
<div class='b'>B
</div>
<button>Launch</button>
但老实说，设置起来并不总是那么容易，所以如果你确定它是偶尔会被触发的东西，你可能会懒惰并同步进行：
$('button').on('click',function(){
$('.b').show(); // apply display:block
document.body.offsetHeight; // force a reflow
// trigger the transitions
$('.b').css('right','80%');
$('.a').css('right','80%');
})
body {
width:800px;
height:800px;
}
div {
width:50px;
height:50px;
background-color:#333;
position:absolute;
display:none;
right:5%;
top:0;
transition:right .5s cubic-bezier(0.645, 0.045, 0.355, 1);
color: white;
}
.a {
display:block;
top:60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'>A
</div>
<div class='b'>B
</div>
<button>Launch</button>