相关疑难解决方法(0)

我有 2div秒，其中之一是通过display:none;. 两者在属性上都有相同的 css 过渡right。

如果我更改属性right通过jQuery和显示被隐藏的div，无论是使用$.css('display','none')或$.show()或$.toggle()等，隐藏DIV的结束位置瞬间画

$('button').on('click',function(){
  $('.b').show();
  $('.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>

如果我使用$.animate()它会起作用。但我的问题是；这是错误还是正常行为？

编辑不是显示上的过渡的重复：属性导致这里的问题不是动画显示属性也不是可见性

我有一个大型游戏项目，在其代码中使用了大量的 jquery。前段时间我去掉了所有的 jquery 并用纯 JS 替换它，但我遇到的一件事是替换游戏中对射弹的 .animation 调用。

看来我应该用 CSS 过渡替换它们，而游戏需要知道过渡何时完成，所以我需要为过渡添加回调。一切都很好，除了当我为弹丸分配新的位置值时，过渡被完全跳过并且没有调用回调。出于某些不道德的原因，如果我将其 css 位置的更改包含在 SetTimeout 中 1 毫秒，它就会开始工作——即使那样，有时它仍然会跳过过渡。

现在它通常可以工作，除了大约 10 次转换将播放但随后不会调用回调。我不知道为什么 settimeout 有助于在那里，我不知道为什么回调有时不起作用。谁能帮我理解？

let tablehtml = '<div id="'+animid+'" style="position: absolute; left: ' + ammocoords.fromx + 'px; top: ' + ammocoords.fromy + 'px; background-image:url(\'graphics/' + ammographic.graphic + '\');background-repeat:no-repeat; background-position: ' + ammographic.xoffset + 'px ' + ammographic.yoffset + 'px; transition: left '+duration+'ms linear 0s, top '+duration+'ms linear 0s;"><img src="graphics/spacer.gif" width="32" height="32" /></div>';

document.getElementById('combateffects').innerHTML += tablehtml;
let animdiv = document.getElementById(animid);
animdiv.addEventListener("transitionend", function(event) { …

在我的问题中,DOM重绘方法是那些修改DOM并导致浏览器重绘页面的方法.例如:

const newChildNode = /*...*/;

document.body.appendChild(newChildNode);

const newHeight = document.body.scrollHeight;

这段代码在正常情况下工作正常,但我不太确定它在高压条件下的表现如何,比如有很多请求重绘页面.我可以假设在document.body.scrollHeight执行时,newChildNode屏幕上已经可见吗？