某些地方内联元素样式的奇怪转换行为

Question

--这是一个复制问题的jsfiddle示例文件： https://jsfiddle.net/Lhr0d6cw/11/

我希望元素(单击时)从其原始位置展开6秒，但请注意，当您单击红牌(或任何卡)时，它不会开始从原来的位置展开，而是从中间展开，因为它是因为transition of 6s到top和left没有被应用的原因。

到目前为止，只有我能够使它正常工作的地方是堆栈溢出编辑器下面，或者通过在代码中插入调试器并手动完成它，但是当使用本地主机或jsfiddle时，它不能正确转换。

--这是堆栈溢出的相同示例，它的工作原理是：

​

const productCards = document.querySelectorAll(".products__card");

productCards.forEach(c => {
  // console.log("clicked1");
  c.addEventListener("click", openCard)
});

function openCard(e) {

  console.log("clicked");
  console.dir(this);
  let top = this.getBoundingClientRect().top;
  let left = this.getBoundingClientRect().left;
  // this.style.transition = "top 0.9s, left 0.9s";
  this.style.top = top + "px";
  this.style.left = left + "px";
  this.style.position = "fixed";
  console.log(`top: ${top}, left: ${left}`);
  // debugger;
  this.classList.add("open");
}

.products {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  min-width: 1000px;
  max-width: 1500px;
  margin-bottom: 300px;
}

.products .products__card {
  display: flex;
  flex-direction: column;
  width: 150px;
  height: 250px;
  margin-bottom: 30px;
  margin-right: 30px;
  margin-left: 30px;
  background-color: red;
  transform: scale(1);
  /* box-shadow: 3px 7px 55px -10px c(very-light); */
  transition: width 0.9s, height 0.9s, z-index 0.9s, top 6s, left 6s;
}

.products .products__card.card-1 {
  background-color: red;
}

.products .products__card.card-2 {
  background-color: blue;
}

.products .products__card.card-3 {
  background-color: green;
}

.products .products__card.card-4 {
  background-color: yellow;
}

.products .products__card.card-5 {
  background-color: pink;
}

.products .products__card.card-6 {
  background-color: gray;
}

.products .products__card.open {
  width: 550px;
  height: 800px;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 120;
  box-shadow: 0 0 1000px 1000px c(box-overlay);
}

<div class="products">

  <div class="products__card card-1">

  </div>
  <div class="products__card card-2">

  </div>
  <div class="products__card card-3">

  </div>
  <div class="products__card card-4">

  </div>
  <div class="products__card card-5">

  </div>
  <div class="products__card card-6">

  </div>
</div>

​

在调试时工作：

如上所述，奇怪的是，当我在代码中插入调试器并手动跳过添加.open类的最后一步时，我在浏览器中使用localhost的问题也得到了解决。如果您在jsfiddle或您自己的编辑器中有相同的问题，请尝试在debugger;之前添加this.classList.add("open");，然后打开控制台，然后单击卡片，在控制台中手动完成最后一步。您会注意到，卡片从原来的位置扩展，按需要完成6s，这意味着在这种情况下应用了转换。

我的问题：

为什么transition for top和left只在特定环境中工作？是浏览器的问题吗？我用的是最新的铬。有人知道有更好的方法来实现同样的结果吗？

代码注释： -obviously，6秒不是我将在代码中使用的，它在这里只是为了使转换变得明显。

-In我的源代码，您可以看到，由于我不能从position static过渡到position fixed，所以在添加.open类之前，我必须使用Javascript将position fixed样式内联添加到元素中，这样在添加.open时transition才能正确地发生。

-I还内联地添加了top和left值，以便在应用position: fixed样式时将卡片保持在原来的位置，因为您可能知道，固定位置将元素从其流中提取出来，因此顶部和左侧保持其位置。

-I添加了！在css .open类中很重要，因为没有它，我就无法覆盖内联.open，正如您可能也知道的那样。

谢谢

Answer 1

我刚才用小技巧解决了我的问题。在某些环境(localhost，jsfiddle)中，javascript引擎添加.open类的速度似乎比预期的要快，而且它在调试(缓慢过程)时运行良好这一事实对我来说是这样的。因此，我在最后一段代码中添加了一个setTimeout()，延迟了20。这解决了我的问题，现在它在JSfiddle和我的计算机上运行得很好。下面是新编辑好的示例：

https://jsfiddle.net/Lhr0d6cw/14/

setTimeout(() => {
    this.classList.add("open");
}, 20);

我仍然想知道是否有更好的方式做这个动画，如果有人愿意分享！