Javascript 某些位置内联元素样式的奇怪转换行为

这是一个复制问题的JSFIDLE示例文件：

我希望元素（单击时）从原始位置展开6秒，但请注意，当您单击红牌（或任何牌）时，它不会从原来的位置开始展开，而是从中间展开，我假设它是因为由于某种原因，没有应用6s到

顶部和
左侧的
转换

到目前为止，我唯一能够让它正常工作的地方是下面的stackoverflow编辑器，或者在代码中插入调试器并手动执行调试器，但是当使用我的localhost或JSFIDLE时，它无法正常转换

这与stackoverflow上的示例相同，可以根据需要工作：


const productCards=document.queryselectoral（“产品卡”）；
productCards.forEach（c=>{
//console.log（“clicked1”）；
c、 addEventListener（“单击”，打开卡片）
});
函数openCard（e）{
控制台日志（“单击”）；
console.dir（this）；
设top=this.getBoundingClientRect（）.top；
left=this.getBoundingClientRect（）.left；
//this.style.transition=“顶部0.9s，左侧0.9s”；
this.style.top=top+“px”；
this.style.left=left+“px”；
this.style.position=“固定”；
log（`top:${top}，left:${left}`）；
//调试器；
这个.classList.add（“打开”）；
}
.products{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
证明内容：中心；
最小宽度：1000px；
最大宽度：1500px；
边缘底部：300px；
}
.产品.产品卡{
显示器：flex；
弯曲方向：立柱；
宽度：150px；
高度：250px；
边缘底部：30px；
右边距：30px；
左边距：30px；
背景色：红色；
变换：比例（1）；
/*盒影：3px7px55px-10pxC（非常轻）*/
过渡：宽度0.9s，高度0.9s，z指数0.9s，顶部6s，左侧6s；
}
.产品.产品卡.卡-1{
背景色：红色；
}
.产品.产品卡.卡-2{
背景颜色：蓝色；
}
.产品.产品卡.卡-3{
背景颜色：绿色；
}
.产品.产品卡.卡-4{
背景颜色：黄色；
}
.产品.产品卡.卡-5{
背景颜色：粉红色；
}
.产品.产品卡.卡-6{
背景颜色：灰色；
}
.产品.产品卡.打开{
宽度：550px；
高度：800px；
前50%！重要；
左：50%！重要；
转换：翻译（-50%，-50%）！重要；
z指数：120；
盒影：0 0 1000px 1000px c（盒叠加）；
}
我刚才通过应用一点技巧解决了我的问题。在某些环境（localhost、jsfiddle）中，javascript引擎添加.open类的速度似乎比预期的要快，而调试（缓慢的过程）时它工作正常这一事实向我表明了这一点。因此，我在最后一段代码中添加了一个
setTimeout（）
，将其延迟了20秒。这解决了我的问题，现在它可以在JSFIDLE和我的计算机上正常工作。以下是新编辑的有效示例：


我仍然想知道，如果有人愿意分享，是否有更好的方法来制作这个动画

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